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Preface 


Digital buyers are improving economies around the world, and information. 
technology (IT) provides the necessary subsides to allow customers to buy services 
and products over the Internet. According to the research conducted by Statista 
(http: //g00.g1/BSCiu0), in 2016, 1.12 billion people worldwide are expected to 
buy goods and services online. 


Since the launch of Amazon. соп, the first commercial-free 24-hour e-commerce 
website, the universe of software development techniques has evolved, and new 
approaches are emerging, such as cloud computing — previously no more than an 
embryonic idea, today a concrete application. 


The Magento Commerce company, recognized as the leading e-commerce platform 
in the 2015 Internet Retailer Top 1000, B2B 300, and Hot 100 lists, is in constant 
evolution since the first Magento Community Edition (CE) system version in 2008. 
Launched recently, Magento CE 2 0 has great features and takes advantage of the 
newest client-server techniques providing a mature e-commerce system and a 
promising professional area to explore. 


Magento, used by thousands of merchants for their transactions worth billions, 
provides the flexibility to customize the content and functionality of your website. 
By strengthening your fundamentals in Magento development, you can develop the 
best solutions and take advantage of the growing market. 


This fast-paced tutorial will provide you with skills you need to successfully create 
themes, extensions, and solutions to Magento 2 projects. 


This book begins by showing you how to set up Magento 2 before gradually moving 
onto setting the basic options of the Sell System. You will take advantage of Search 
Engine Optimization aspects, create design and customize theme layout, develop 
new extensions, and adjust the Magento System to achieve great performance. By 
the end of the book, you will have quickly explored all the features of Magento 2 to 
create a great solution. 





Preface 





With ample examples and a practical approach, this book will ensure your success 
with this astonishing e-commerce management system. 


Enjoy the read. 


What this book covers 


Chapter 1, Magento Fundamentals, teaches you how to create a basic environment, 
install Magento 2.0, and study some Magento concepts. 


Chapter 2, Magento 2.0 Features, helps you discover the features of Magento 2.0 and 
configure some basic Magento options. 


Chapter 3, Working with Search Engine Optimization, provides you with some 
configuration tips to tweak the Magento options for SEO purposes. 


Chapter 4, Magento 2.0 Theme Development - the Developers' Holy Grail, gives you an 
overview of theme development and techniques of customizing Magento 2.0. 


Chapter 5, Creating a Responsive Magento 2.0 Theme, implements a practical project to 
create your custom theme. 


Chapter 6, Write Magento 2.0 Extensions - a Great Place to Go, provides you with 
development techniques by implementing a practical project to create your own 
Magento extension. 


Chapter 7, Go Mobile with Magento 2.01, covers techniques of working with Magento 
оп mobile devices. 


Chapter 8, Speeding up Your Magento 2.0, explains good practices to fine-tune your 
Magento system and environment to gain performance. 


Chapter 9, Improving Your Magento Skills, explores the tools and ways to improve your 
skills in the Magento universe. 


What you need for this book 


You need the following for the projects in this book: 
Operating Systems: 
+ Linux, OSX or Windows (7, 8 or 10); 
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Software: 


+ XAMPP 
+ Browser (Google Chrome or Firefox) 


+ Code editor (Sublime Text, Notepad++ or Atom.io) 


Who this book is for 


If you are a PHP developer who wants to improve your skills in e-commerce 
development by creating themes and extensions for Magento 2, then this book 
is for you. 


Conventions 


In this book, you will find a number of text styles that distinguish between different 
kinds of information. Here are some examples of these styles and an explanation of 
their meaning. 


Code words in text, database table names, folder names, filenames, file extensions, 
pathnames, dummy URLs, user input, and Twitter handles are shown as follows: 
"In order to start XAMPP for Windows, you can execute xampp-control exe." 


A block of code is set as follows: 


<theme xmlns:xsi="http://www.w3 .org/2001/XMLSchema-instance" xsi:noNam 
espaceSchenaLocat ion="urn :magento: framework: Config/etc/thene.xsd"> 
etitle»Magento Lumac/title> 
parent sMagento/blanke/parent> 
medias 
«preview inage»media/preview.jpg«/preview image» 
</media> 


</cheme> 


When we wish to draw your attention to a particular part of a code block, the relevant 
lines or items are set in bold: 


«Magento root directory»/app/design/frontend/Packt 
Any command-line input or output is written as follows: 


Magento root directory»/app/design/frontend/Packt/ba: 
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New terms and important words are shown in bold. Words that you see on 
the screen, for example, in menus or dialog boxes, appear in the text like this: 
"Complete the installation by pressing the Finish button." 


[= Warnings or important notes appear in а box like this. ] 


[ 0) заново 1 


Reader feedback 


Feedback from our readers is always welcome. Let us know what you think about. 
this book — what you liked or disliked. Reader feedback is important for us as it 
helps us develop titles that you will really get the most out of. 


То send us general feedback, simply e-mail feeabackupacktpub. com, and mention 
the book's title in the subject of your message. 


If there isa topic that you have expertise in and you are interested in either writing 
or contributing to a book, see our author guide at www. packtpub.com/authors. 


Customer support 


Now that you are the proud owner of a Packt book, we have a number of things to 
help you to get the most from your purchase, 


Downloading the example code 

You can download the example code files for this book from your account at 
http: //www.packtpub .com. If you purchased this book elsewhere, you can 
visit http: //www.packtpub .com/support and register to have the files e-mailed 
directly to you. 





You can download the code files by following these steps: 


1, Log in or register to our website using your e-mail address and password. 
2. Hover the mouse pointer on the SUPPORT tab at the top. 
3. Click on Code Downloads & Errata. 


Levi] 
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Enter the name of the book in the Search box. 
Select the book for which you're looking to download the code files. 
Choose from the drop-down menu where you purchased this book from. 
Click on Code Download. 


Once the file is downloaded, please make sure that you unzip or extract the folder 
using the latest version of. 


+ WinRAR / 7-Zip for Windows 
+ Zipeg / iZip / UnRarX for Mac 
* Tip / PeaZip for Linux 


Downloading the color images of this book 
We also provide you with a PDF file that has color images of the screenshots/ 
diagrams used in this book. The color images will help you better understand the 
changes in the output. You can download this file from http://www .packt pub. 
con/sites/default/files/downloads/Magento Development By Example . 
ColoredImages.pdf, 


Errata 


Although we have taken every care to ensure the accuracy of our content, mistakes 
Чо happen. If you find a mistake in one of our books — maybe a mistake in the text or 
the code — we would be grateful if you could report this to us. By doing so, you сап 
save other readers from frustration and help us improve subsequent versions of this 
book. If you find any errata, please report them by visiting ht tp: //wew.packepub, 
con/submit-errata, selecting your book, clicking on the Errata Submission Form 
link, and entering the details of your errata. Once your errata are verified, your 
submission will be accepted and the errata will be uploaded to our website or added 
to any list of existing errata under the Errata section of that ttle. 


To view the previously submitted errata, go to https: //www.packtpub.com/books/ 


content /support and enter the name of the book in the search field. The required 
information will appear under the Errata section. 
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Piracy 

Piracy of copyrighted material on the Internet is an ongoing problem across all 
media. At Packt, we take the protection of our copyright and licenses very seriously. 
If you come across any illegal copies of our works in any form on the Internet, please 
provide us with the location address or website name immediately so that we can 
pursue a remedy. 





Please contact us at copyrightápa 
pirated material 


pub. com with a link to the suspected 


We appreciate your help in protecting our authors and our ability to bring you 
valuable content. 


Questions 


If you have a problem with any aspect of this book, you can contact us at 
questionsápacktpub. con, and we will do our best to address the problem. 





Magento Fundamentals 


Magento is a highly customizable e-commerce platform and content management. 
system. Magento is one of the most used e-commerce systems to create online 
stores around the world by providing management of inventory, orders, customers, 
payments, and much more. It has a powerful scalable architecture. 


Are you ready to start on the world of Magento development? 


First of all, we will need to set up our environment. In this book, we will cover 
how to set up a local environment. Itis very important to have this local ecosystem 
development to work smoothly and in an agile way 


In every chapter of this book, we will work with a mini project. It's kind of a sprint 
to learn the path. In this chapter, our mission is to create a work environment and 
understand the basic concepts of Magento (ttp: / /magento. conj). 


After setting up the environment, you'll study the Magento folder structure and 
work on a basic Model View Controller (MVC) software architecture pattern and 
Magento basic setup. 


Basically, we will work on this chapter with the following topics: 


+ XAMPP PHP development environment 
+ Magento e-commerce system 
+ Magento system structure 


= Magento basic setup 


Are you ready for fun some? Let's go! 


"1 
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XAMPP PHP development environment 
The XAMPP is a complete web development environment. On its install package, 


we can find Apache, MySQL, PHP, and Perl. This is everything that you will want 
to develop your solutions! 





At this time, you can imagine the meaning of XAMPP, but the X before the АМРР 
has the meaning of cross ог cross-platform. So, we have XAMMP: (X) Cross-platform, 
Apache, Maria DB, PHP, and Perl. 


The goal of XAMPP is to build an easy-to-install distribution for developers to get 
into the world of Apache. XAMPP is a project of Apache Friends (Apache Friends 
is a non-profit project to promote the Apache web server). 


Why we are working with this software? Let's find out: 


+ Apache (http: //ttpa apache .org/): This has been the most popular 
web server on the Internet since April 1995 providing secure, efficient, 
and extensible HTTP services in sync with the current HTTP standards 

+ MariaDB (hetps: //mariadb. org/): This strives to be the logical choice for 
database professionals looking for a robust, scalable, and reliable SQL server 





+ PHP (http: //php-net/): This is a popular general-purpose scripting language 
that is especially suited to web development; and, most importantly, it is the 
main language of Magento 


+ Perl (https: //www per) .org/): This is a highly capable, feature-rich 
programming language with over 27 years of development 


So far so good, but how about doing some action? 


[2] 
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XAMPP installation 


First of all, let's access the XAMPP website on https : / wow apachefriends .org/ 





E XAMPP Apache + MariaDB + PHP + Perl 


What is XAMPP? 


XAMPP is the most popular PHP development 
fenvironmant 


me EXP 


e» {омен в О ANP ir Una 


XAMPP has three distinct versions for different operating systems (OS): Windows, 
Linux, and OS X. Choose your preferred version to download, and start the 
installation process 








XAMPP for Windows installation 


XAMPP for Windows has three different kinds of installation files: 


* Installer: This is a classic Windows installation method 


+ Zip: This method uses compressed files to install manually 


* Tzip: This method uses compressed files to install manually 
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The (.exe) installer is the most popular process to install. Download it and execute to 
start the installation process, shown as follows: 


Welcome to the xap? setup Wand 








1. You can skip FileZilla FTP Server, Mercury Mail Server, and Tomcat for our 
installation purposes but feel free to consult Apache Friends Support Forum 
for further information at https: / /communi ty .apache£riends.org 

2. On XAMPP, we have the option to use Bitnami (https: //bitnami .con/ 
xampp), but for learning purposes, we will install Magento in a classic way. 


га] 
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3. Complete the installation by pressing the Finish button. 





‘Completing te XAMPP Setup Wizard 
‘Sotup has finished inetalig XAMPP on your 


computer 
E] Launch XAMPP 


bitnami 





Oel <Back (Finish) 











4, Inorderto start XAMPP for Windows, you can execute xampp-control exe 
and start the Apache web server. 


5, To test if everything is working, type http: //localhostur! in your favorite 
web browser. You will see the XAMPP start page: 


novum 





С) XAMPP Apache + MariaDB + PHP + Perl 


Welcome to XAMPP for Windows 5.6.14 


ow you can ишт ug Asch, Mara PHP ad omer 














[5] 


Magento Fundamentals 


XAMPP for Linux installation 


XAMPP for Linux has two main versions of installation files: 








* 32bit version 


+ GLbit version 
Choose the file according to your architecture and follow these steps: 


1. Change the permissions to the installer: 
chmod 755 xampp-linux-*-installer.run 

2. Run the installer: 
sudo ./xampp-limux-*-installer.rum 
XAMPP is now installed below the /opt /Lanpp directory. 


3. Тоған XAMPP, execute this command on terminal: 


mudo /opt/lampp/lampp start 


4, To test if everything is working, type the http: //1oca1host URL in your 
favorite web browser. You will see the XAMPP start page: 





E] XAMPP Apache + MariaDB + PHP + Perl 


Welcome to XAMPP for Linux 5.6.14. 
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XAMPP for OS X installation 


To install XAMPP for OS X, you simply need to follow these steps: 


Download the DMG image file. 
Open the image file to start the installation process. 
The steps are pretty much the same as Windows installation. 


To test if everything is working, type the http://localhost URL in your 
favorite web browser. You will see the XAMPP start page 





[3] XAMPP Apache + MariaDB + PHP + Perl 


Welcome to XAMPP for OS X 5.6.14 

















The XAMPP htdocs folder is the docroot folder of your server. Everything 
that you save on htdocs can be accessed via any browser. For example, if you 
save index. php inside the htdocs root, you can access this script by entering 
heep: //1ocalhost / index. hp. If you save your file їп the packt folder, you 
can access it by http: //Localhost /packt /index. php. Piece of cake! 


Magento 


Magento is an open source content management system for e-commerce websites 
It's one of the most important e-commerce systems, which has grown fast since its 
launch in 2008. 


Basically, Magento works with two different types of Magento: Community Edition 
(CE) and Enterprise Edition (EE). In this book, we will cover CE. 


Ul 
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Опа study provided Бу aheadWorks (https ://aheadworks .com/) in October 2014, 
Magento CE has taken the leading position among examined e-commerce platforms, 





СЕТЕ 
@ 202 woocommerce 
Verse 

Magento EE 

Zencart 

terii Internetshop 
ояоелор 
а 
p 
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Now, we have solid concepts about "where we are going". It's very important to 
have solids concepts about every aspect that you are working on in this moment 
Globally, e-commerce shows a remarkable potential market and Magento 
professionals are welcome. 
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Magento installation 

First of all, we need to create a user account on the Magento website (http://www. 
magento. con) to download Magento CE. Click on the top-menu link My Account 
and after clicking the button labeled Register, fill out the form and confirm your 
registration. 


Once registered, you gain access to download Magento CE, You can access the 
Products | Open Source/CE and VIEW AVAILABLE DOWNLOADS menus, 

















Fall Release with Sample Data GP wit 





ata) 


Download with Composer 
























On this page, we have three important options: 
+ Full Release (ZIP with no sample data): This is a complete download of the 
last and stable Magento version 
+ Full Release with Sample Data (ZIP with sample data): This is important 
to create example products to our store for testing. 


* Download with Composer: This is the dependency management 
installation tool 


121 
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Choose the Full Release with Sample Data (ZIP with sample data) option for 
downloading Magento, Extract the compressed files in the XAMPP ht docs 
and rename the folder to packt. 


[= 


Before starting the Magento installation, we'll need to create а new MySQL database 
instance to store the Magento data, phpMyAdmin is a MySQL web app to manage 
your database and can be accessed at http: //localhost /phpmyadnin/ 








Remember to start Apache and MySQL services on the XAMPP 
panel before the installation 


Click on the Databases menu and the Create database option to create the 
packt database. 





Databases 


i Creste database ij 





id ] савет ) 
Database s Colan 

VS, ataa NCH SD 

sid [ae 





performance schema vi éR_gmere! et az Check privleges 
phoryadmin жив nin a- Check privileges 


test 
Total: 5 


ж: Chock prlulogos 














Now, let's start our Magento installation. On your browser, access 
http://localhost /packt/setup. 
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By now, you will see this installation page on your browser: 





Magento 





Version 2.0.0 


Welcome to Magento Admin, your online store headquarters. 
Click ‘Agree and Set Up Magento’ or read Getting Started to learn 


Terms & Agreement 
Agree and Setup Magento 


Let's start the Magento installation by following these steps 











1. Readiness Check: Check the environment for the correct PHP version, 
PHP extensions, file permissions, and compatibility. 

2. Adda Database: Fill the database form with your connection information. 
By default, you can follow the suggestions given here: 





Step 2: Add a Database 


Database Server Host.» | localhost 
Database Server Username + | root 
Database Server Password 

Database Name * | pact 


Table prenic [pet 
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3. Web Configuration: Enter you store address and admin address here: 





‘Step 3: Web Configuration 


чиртте [rupit | 


Magento Admin Address «Pris hocaPenupuón! som pack 





4. Customize Your Store: In this step you provide the time zone, currency, 
and language information: 





Step 4: Customize Your Store 


Store Default Time Zone + | GMTO) 





Store Default Currency + [EWO tEUR 


Store Default Language + | Engish (United Kingdom 











5. Create an Admin Account: Enter with personal login information and set the 
admin address to packt -admin 


After all these steps, we are done! Congratulations! We have our first 
Magento installation! 


You can access your new site by accessing the URL at http://localhost /packt: 


wars sga Cete 


Get fit and look fab in new. 
seasonal styles 
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And you can access the admin area by accessing the URL at http: //12calhcat/ 
packt /adnin-packt: 


Welcome, please sign in 





For more information about Magento installation, access http: / /devdocs 
magento.com/guides/v2.0/install-gde/bk-install-guide. html 


Magento MVC architecture 

MVC is an architectural software pattern that works with three different but 
interconnected parts. Its principal mission is to abstract the development work 
into interdependent layers providing the best practices to documentation and 
organization of software projects. 


‘The Magento e-commerce solution is written with the PHP Zend framework, 
which is one of the most powerful PHP frameworks. For more information, 


access http: // framework. zend.com/ 
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Magento is a configuration-based MVC System. For example, when you develop a 
module (we will check this in the next chapters), besides creating new files and 
classes to your module, you need to also create a config. xn! file. This file contains 
all the configuration data for Magento module. These practices abstract some 
important information that you can easily edit to set the module as you need. 


E 
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In this book, we will cover only the very basic Magento software architecture 
concepts, but it's highly recommended that you to study more software design 
patterns, especially in our case MVC software architecture needs to be understood. 
well to best experience the field of software development, 


Summary 


You've now seen what Magento can do; you have installed Magento too. You started. 
to understand the basic concepts of Magento, and certainly, you'll get more experience 
їп developing your own Magento solutions by working in the projects of this book. 


In the next chapter, we'll work with some Magento Sell System features. 
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Magento 2.0 Features 


Magento has many features to provide a great experience to the users and developers 
Understanding what Magento can provide is the key to success in the development of 
Magento. All Magento developers seek for improvements in this area. 





On the Magento Connect site (bt tps: //www.magentoconmerce .con/mage 
connect /), you can search for uncountable extensions to improve your Magento 
solution: Checkout, Cart, Order Management, Gifting, Pricing, and Promotion, and 
a lot more. At this point, itis crucial to understand that Magento has a native solution 
and how its features can help you think of some great solutions for development. 


In the previous chapter, you learned the fundamentals to create a basic local Magento 
environment to work with book projects. In this chapter, you will learn how Magento 
manages and improves system sell processes 
‘The following topics will be covered in this chapter: 

+ Magento features 

5 Magento architecture 

‘+ Magento order management 


+ Magento command-line utility configurations 


Have fun! 
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The revolution of Magento 2.0 


Magento Commerce has promoted important changes between its 1.x and 2.0 
versions. Some usual problems of the Magento 1.x version were fixed in this 
new version. The following processes/modules have received improvements 
in Magento 2.0: 


= Performance 


‘+ Payment method 


* Checkout 
* Catalog 

* CMS 

+ Web API 


+ Framework 
+ Setup 
All good software or systems pass through incremental improvements for evolving 


according to its production environment; it couldn't be different with a commerce 
platform that powers over 250,000 online stores worldwide 


Magento 2.0 CE has a flexible architecture and a modular code base; it has a modem 
theming and an extensive Application Programming Interface (API). To get a better 
performance, Magento 2.0 compresses JavaScript files and images and gives support 
to Apache Varnish integration on the server side to enable faster performance 


Security is another subject treated in the Magento 2.0 system. According to its 
official documentation (http://g00.91/27sPm3), Magento 2.0 has had substantial 
enhancements in its security layer: 

* Enhanced password management 

+ An improved prevention of cross-site scripting (XSS) 

* Restricted permissions for file access 

+ An improved prevention of click jacking exploits 

* The use of non-default admin URL 
Extensibility and modularity allow Magento to be highly customizable. As an 


objected-oriented solution, Magento follows good architectural principles and 
coding standards that provide high cohesion and loose coupling. 
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The following diagram illustrates Magento's architecture and how the components 
are integrated: 














Presentation Layer 


serve Layer 


Domain Layer 


Perssteree Layer 








Magento works with PHP Standards Recommendations (PSR). The PSR establishes 
the following good programming practices: 


PHP extensions: This allows Magento to work with some PHP extension 
solutions that are required by Magento, for example, PDO and Memcache. 
PSR-0— Autoloading Standard: This enables class autoloading on the PHP 
code. It's highly recommended to use PSR-4 instead of PSR-0, but the PSR-0 
standard illustrates only the Magento architecture standards. 

PSR-1— Basic Coding Standard: These are some good practices to write 
the PHP code. 


PSR-2— Coding Style Guide: This extends PSR-1, adding the layout 
code presentation. 
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‘+ PSR-3— Logger Interface: This exposes eight methods to write logs to the 
eight RFC 5424 levels (debug, info, notice, warning, error, critical, 
alert, and emergency). 

+ PSR-4—Autoloading Standard: This describes a specification for 
autoloading classes from file paths. 


[ Ñ) тошок sets to-go ] 


On Magento Framework, we have some libraries and dependencies of this 
architecture. Zend Framework (ZF) is a very important layer of this architecture; 
once Magento was written in ZF; as we saw earlier. 


Finally, we have Web Users (frontend /backend), Service Consumers 
(API and endpoints), Service Layers (interfaces/ contracts), and Models. 
(resources and database). 


On the Web Users layer, we can define Magento's main processes as: 








Magento 


Ca ит EIS 


+ Products: This manages the configuration of products in Magento, such as 
catalogs, inventory, categories, and attributes 











* Marketing: This manages promotions, communications, and SEO 

* Content: This manages the pages content 

+ Customers: This manages and gets information about customers 

* Sales: This manages cart process, checkout, orders, shipping, and payments 


* Reports: This generates reports and statics of e-commerce 
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We will discuss these topics in the coming chapters, but now, I'd like to introduce 
to you one of the most important processes of any kind of e-commerce: the Sales. 
layer or Magento Order Management. This is one of the most important things to 
understand the Magento development core. 


An introduction to the Magento order 
management system 








Magento Order Management System m 
~ ie 














On the e-commerce systems, the sell process is one of the most important features of 
every online business, providing a good e-commerce life cycle. 


Some processes will be triggered when a customer confirms his order. Magento 
collects all the customer data and processes the request turning it into an order. 
This book will only cover the basic concepts of this process, but it's very important 
to understand them to develop consistent Magento extension solutions (we will see 
about this in Chapter 6, Write Magento 2.0 Extensions - a Great Place to Go). 


Let's take a look at the Magento sales operations basics. 
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Sales operations 


Lets play with the Magento admin area. In your favorite browser, enter the URL 
http://localhost/packt/admin-packt. Now, enter with your login credentials 
to access the admin area: 





Dashboard 





61.00 


rags order Er] ЕТ Er] Й 
9050. 














In Magento 2.0, you can manage sales operations by accessing the Sales menu in the 
admin area. Magento gives you the possibility to configure the following Sales options 
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‘These options give you the power to manage your sales system as you want. Though 
it's, it's important to explore some Magento tools, extensions, and techniques to take 
full advantage and make improvements on your sales system to gather techniques to 
develop your own solution: 





Orders а à ice 


a WES] ec emm 























We have many options to make improvements on sales operations. You can 
configure up-sells and cross-sells features, for example, to give your customer 
more ways to order on your store. To do so, take advantage of a search engine 
optimization, work with a multilingual store, a geo-targeting, responsive design, 
and a simplified checkout process. 


Asimplified checkout process 


In this section, welll see how to implement a simplified checkout process on 
our store. 


Orders 


Asa system administrator, you can access the admin area (http: //localhost / 
mynagento/adnix) to get all the customer order information, generate the product. 
tracking code, invoices, and send a message to your customer, Magento stores ай 
the order data on the admin area | Sales | Orders. 


As an admin, Magento gives you the option to order products directly for your 


customer. On Magento, we have a persistent cart, print invoices, credit memo, 
and transactions. 
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Payments 

You have a few options of payment methods in Magento. Magento has a native 
support to Google Checkout and PayPal. They both are payment gateways that 
provide the entire sell transaction environment to your store. 


Basically, you choose your payment method and choose how you will pay for 
your product: credit card or deposit. 


Promotions 
With the products prices defined, you can set up promotions in advance. Promotion 


systems are very useful to establish a solid relationship with the customer 


In Magento, it is possible to define catalog price rules and shopping cart rules. 
Basically, you can define price behavior according to your promotions and customer 
defined rules, such as postal code, and certain value of discount. 


You can provide coupon codes for your customers to raise Magento sells. 


Magento 2.0 command-line configuration 


Once you have installed Magento 2.0 CE, you will need to configure some options. 
and manage the system life cycle according to your specific needs. You can start. 
your Magento configuration and administration using the command-line utility. 


Let's see how this feature works. 


The command-line utility 
Magento 2.0 has a command-line utility to help developers manage installation and 
configuration tasks. The new command-line interface can do the following: 

+ Install Magento 

* Manage the cache 

+ Manage indexers 

* Configure and run cron 

+ Compile code 

+ Set the Magento mode 

* Set the URN highlighter 
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Create dependen 





reports 
Translate dictionaries and language packages 
Deploy static view files 

Create symlinks to LESS files 

Run unit tests 

Convert layout into XML files 

Generate data for performance testing 

Create CS5 from LESS (CSS real-time compilation) 


To work with this tool, you will need to open a terminal (Linux, OS X) or command 
prompt (Windows) and access the «your Magento install dir>/bin directory. 
Then, enter with the php magento command to see all the available commands of 
the command-line utility: 





Remember to configure the PHP path to the system environment 
QS variable to execute the command. For further information, access 
http: //php.net/manual/en/faq.installation.php. 
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Let's play a little bit with the utility by disabling your Magento system cache: 


*— Runthephp mag 
be enabled. 


cache;status command, The cache will probably 





cache:disable command to disable any cache system. 





* Runthephp magen 





To know more about cache management in command-utility tools, 
ss http: //goo. gl /cS. 
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Now lets try to manage Magento indexing. Magento indexing transforms the data 
to improve the performance of your system by executing the following commands. 
Indexing technique optimizes the price calculations process, for example, and it has. 
an important role to play in the Magento performance: 


+ Runthe php magento indexer: info command to view the lists of indexers 





+) Runthe php m atus command to view the real-time status 





* Runthe php magento indexer:reindex command to rebuild the indexation 





Magento indexing was successfully rebuilt, thanks to the command-line utility actions! 


You can build cron jobs in a remote server to automate some Magento actions. 
For example, create an automation routine to re-index Magento periodically. 


Istrongly advise you to play more with the command-line utility. You can consult 
the online documentation available at ht tp: / /qoo.¢1 /ivn 
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Summary 


We started this chapter to get the real bases of Magento power. It's important to get 
solid concepts, before you eagerly jump and begin developing Magento solutions. 
Take a moment to understand the scope of your project. This will make Magento 
development a much more rewarding experience. 





Magento has a solid structure to develop your own solutions. You can automate some 
tasks using the Magento command-line utility and optimize Magento resources to get 
better results. 


In the next chapter, we will work with Magento search engine optimization. 
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Engine Optimization 


Search Engine Optimization (SEO) is a technique to build your site following good 
practices established by W3C Consortium and search engines, such as Google, to 
increase your site's visitation and ranking. On Magento, we need to configure the 
system properly to take advantage of this feature. Nowadays, SEO is a prerequis 

оп every website on the Internet. 





Magento has a great variety of tools to configure the store of SEO and allows SEO 
adjustment for products, categories and CMS page titles, metainformation, and 
headings. 


SEO application is a constant job; it never ends. Basically, you need to know how 
Magento SEO works and what options you have to optimize its working. Magento 
isa search engine-friendly e-commerce platform, and you will discover its main 
concepts in this chapter. 


In this book, you will learn some good techniques and apply them by configuring 
the default installation 


‘The following topics will be covered in this chapter: 
+ Magento SEO management 
* SEO catalog configuration 
+ XML sitemap manager 
+ Google Analytics tracking code 
* Optimizing Magento pages, products, and categories. 
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Magento SEO management 


SEO is the technique of developing a site according to the high standards defined 
by the World Wide Web Consortium and search engine companies, such as Google, 
in order to provide good content visualization to the users and rank the site in 
organic searches. 


Magento provides the user with some significant tools for SEO. Let's take a look at 
some of these techniques and tools. 


Store configuration 


By default, Magento's basic installation has the title Magento Commerce on the 
header settings. It is very important to choose a strong main title to get the right 
amount of traffic on your site. For example, if you are working on the SEO of a 
sports store, you can set the main title as My Sports Store to increase the traffic 
through the title. When people search for something, they always notice the 
earlier words first 
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To adjust your store settings, you need to navigate to Stores | Configuration | 
Design | HTML Head in the Magento admin area (http://localhost /packt / 
admin-packt). 


Choose a good descriptive title for your Magento commerce. It is possible and 
recommended to name all your page titles, including categories and products, 

by entering the site title in the Title Suffix field. To give density to the content for 
SEO engines by configuring the SEO on CMS pages and products, keep Default 
Description and Default Keywords empty. 


For a local and nonproduction environment, prevent the indexing of the site by 
setting Default Robots to NOTNDEX, NOFOLLOW. Otherwise, it is recommended 
toset itto INDEX, FOLLOW 


By working on this configuration, you will find that the main SEO parameters 
of the <head> tag are automatically fulfilled to be run on Magento commerce. 


SEO and searching 


Magento has a specific SEO configuration panel for multiple sections. To access 
the main Magento SEO configuration, enter in the Magento admin area (http: // 
localhost/packt/admin-packt), and you will find the panel by clicking on the 
menu at Marketing | SEO & Search: 





URL Rewrite 
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Magento 2.0 changed some functionality in comparison with its previous version. 
For example, in the URL Rewrites menu, you can manage and define all the URL 
addresses of Magento in order to increase the SEO's friendly URLs. 





URL Rewrites 




















Here, you can simply choose Request Path to edit and enter a description for each of 
them, as shown in the following screenshot: 





Edit URL Rewrite for CMS page а а ive 
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In Search Terms, you can define and redirect the URL according to the search made 
by the user by adding a new search term: 





а а ive 


New Search 











Finally, in the New Site Map section, you can generate Sitemap of your Magento 
installation as shown in the following screenshot: 








New Site Map а а 
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SEO catalog configuration 

Magento has a special panel to take care of the catalog categories of SEO. To 
access this panel, navigate to Stores | Configuration | Catalog | Search Engine 
Optimization, as follows: 








[search engine 





чөөн 





е Cercle Meta Tag For Categories [0 F 











This panel has the following options: 


+ Popular Search Terms: This allows pages to display your most popular 
search phrases. Set this to Yes. 

+ Product URL Suffix: This is the suffix that is added to the end of your 
product URLs. 

+ Category URL Suffix: This is the suffix that is added to the end of your 
category URLs. 

* Use Categories Path for Product URLs: This includes the category URL 
in your URL string, 

+ Create Permanent Redirect for URLs if URL Key Changed: This 
automatically creates a redirect via the URL Rewrites’ module in 
Magento if the URL key is changed in any page on your website. 


+ Page Title Separator: This separates the page titles on the frontend of 
your store. 
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* Use Canonical Link Meta Tag For Categories: This displays the main 
version of the category page. This is picked up by search engines to avoid 
duplicate content. 

+ Use Canonical Link Meta Tag For Products: This has the same functionality 
as the previous item, but it works on the products layer. 


А Soume:http://s1pxya.appspot .con/moz. con/uge/ 
QOS uetting-up-magento-for-the-aesrch-engines 


With these options, you can choose the best strategy for SEO on catalog's default 
options. Magenta gives the administrator the opportunity to tune these options on 
catalog pages. We will work this out later in this chapter. 





XML sitemap manager 


Magento automatically generates an XML sitemap for your store and also keeps it up 


to date. In order to enable this, navigate to Stores | Configuration | Catalog | XML 
Sitemap. Magento has the following options for this section: 





имеш. ЖО Categories Options 


d ^ — Products Options 


cog CMS Pages Options 
Generation Settings 
залатар 


Sitemap Flie Limits 


" Search Engine Submission Settings 











Basically, with these options, it is possible to choose the frequency and priority 
of updates. You may set additional options, such as Start Time and Error 
Notifications, only in the GENERAL settings tab. It's important to configure 
the cron job functionality in your web server to enable this feature. 
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Google Analytics tracking code 


Google Analytics helps track all the statistics for your site, To add Google Analytics 
оп Magento, generate a tracking code on your Google Analytics account (http: // 
analytics .google. com) first of all. After this, navigate to System | Configuration | 
Google API. 





This option works only on hosted Magento sites (that is, the remote server). Take note 
of this for when you work on a remote production Magento site. For the purposes of 
this book, it isn't necessary, but you need to keep this option in mind when you start 
to work on remote projects. 


Optimizing Magento pages 

Once you make Magento SEO system configurations, it's time to set specific options 
directly on Magento pages. This Magento SEO flow gives the user the flexibility to 
focus on content and page ranking. 


CMS pages 

‘The Magento Content Management System (CMS) manager is a very simple but 
powerful tool that provides us with control aver each aspect of the Magento page. 
To access Magento CMS pages configuration in the admin area, go to Content | 
Pages, as shown in the following screenshot: 








Pages 
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Magento's default installation provides some demo content to test CMS pages. 
Check the Home Page content by selecting the Edit option. 














m e 














For the purpose of SEO, Magento's CMS page administration has two main SEO side 
menus: Page Information and Meta Data. 


In Page Information, you can set the following options: 


‘+ Page Title: This should correspond to the main title of the page 


+ URL Key: This is very important to set a great Search Engine Friendly (SEF) 
URL identifier to increase SEO ranking 


* Store View: Here, you can choose the views on the page 
+ Status: This has simple Enabled and Disabled options. 
In Meta Data, you can set the following options: 


* Keywords: Here, enter the keywords that correspond to your site's scope. 


+ Description: Make sure to use this field the right way. A good description 
means а good chance of increasing access and sales. 


The content of your page must be aligned with the metadata for a good 
SEO implementation. 
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Product pages 

This is the most important layer in a Magento store. Besides providing a lot of 
options to configure the product to be sold, this also makes it possible to tune the 
SEO configuration to increase sales through the search engine page ranking system. 
In order to access Product options, navigate to Products | Catalog, as shown in the 
following screenshot: 














Catalog а а ac 
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Click on the first product of the list to take a look at the SEO options. For the purpose 
of SEO, Product Details has the following options: 


+ Name: You need to make this descriptive; think about what people might 
search for 


* Description: Here, you must detail the product as much as possible to make 
your content unique and helpful to users 


+ Categories: This is the category of the product, 
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Search Engine Optimization has the following options: 
+ URL Key: This is the URL that the product will be visible on. If the product 
has a version number or some specific detail, try to put this on the URL. 


* Meta Information: Choose the best Meta Title, Meta Keywords, and Meta 
Description input for your product. 





























Every single product gives the administrator these options to tune SEO ona 
Magento website, 


Category pages 

Magento category pages have great SEO options. As you can note, all the content 
pages on Magento give us administration options to manage SEO. Every aspect on 
Magento configuration is integrated to provide the user with the best experience. 
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To access the Categories configuration, navigate to Products | Categories on the 
admin dashboard, as shown in the following screenshot: 

















ar 





This will provide an option to create a new category, and in the side menu, it is 
possible to check all the categories registered on Magento. For the purpose of S 
Magento has the following options in this section: 





+ Name: This is the category name. 


* Description: This is the description of the category. Focus on using keywords 


strategically for SEO. 


+ Page Title: This refers to the metatitle. Enter your keyword with a few words 


to describe the page. 

+ Meta Keywords: Here, enter the keywords separated by commas. 

+ Meta Description: This is a very important option, so make sure that your 
description covers the products that you're selling and reinforces your brand. 


Make sure to follow a pattern in your content referring to SEO. 
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Summary 

Magento SEO is a powerful tool to increase sales. As a developer, it is very important 
to keep these options and techniques in mind to create mechanisms that would get 
better results for Magento users through new extensions and customizations. 


In this chapter, we discussed the following: 


Magento SEO management 
SEO catalog configuration 

XML sitemap manager 

Google Analytics tracking code 

Optimizing Magento pages, products, and categories 


In the next chapter, we will cover Magento theme development and customization. 
We havea lot of work coming up! 
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Magento 2.0 Theme 
Development – the 
Developers' Holy Grail 


Magento 2.0 has a complex control of its themes. It works with multiple directories to 
generate the final result for the user on its frontend. 


In this chapter we will consolidate the basic concepts that you need to create your 
very first example of Magento theme and activate it 


At the end of this chapter, you will be able to create the basic structure of your own 
theme. The following topics are covered in this chapter: 


‘The basic concepts of Magento themes 
Magento 2.0 theme structure 

‘The Magento Luma theme 

Magento theme inheritance 

CMS blocks and pages 


* Custom variables 


Creating a basic Magento 2.0 theme 
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The basic concepts of Magento themes 


According to the official documentation available at http: //goo.g1/D40x01, 
а Magento theme is a component that provides the visual design for an entire 
application area using a combination of custom templates, layouts, styles, or 
images. Themes are implemented by different vendors (frontend developers) 
and intended to be distributed as additional packages for Magento systems 
similar to other components, 


Magento has its own particularities because it is based on Zend Framework and 
consequently adopts the MVC architecture as a software design pattern. When the 
Magento theme process flow becomes a subject, you have some concerns to worry 
about when you plan to create your own theme. Let's focus on these concepts to 
create our own theme by the end of this chapter. 


Magento 2.0 theme structure 


Magento 2.0 has a new approach toward managing its themes. Generally, 

the Magento 2.0 themes are located in the app/design/frontend/<Vendar>/ 
directory, This location differs according to the built-in themes, such as the 
Luma theme, which is located in vendor /nagento/thene-frontend-luma, 


‘The different themes are stored in separate directories, as in the following screenshot: 





opp/design/frontend/<Vendor>/ 


а «themed 
Q <theme> 
Q <theme3> 
Ds 











Each vendor can have one or more themes attached to it, So, you can develop 
different themes inside the same vendor. 
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The theme structure of Magento 2.0 is illustrated as follows: 





ете d» 
0 Vendor» «Mode» 
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Q source/ 
layout 

О override/ 
а templates/ 
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а fonts/ 
0 imoges/ 
о ow 
composer json 
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How the Magento theme structure works is quite simple to understand: each 
«Vendors «Module» directory corresponds to a specific module or functionality 

of your theme. For example, Magento, Customer has specific .cse and . hem! files to 
handle the Customer module of the Magento vendor. Magento handles a significant 
number of modules. So, I strongly suggest that you navigate to the vendor /nagento/ 
thene-frontend- Luma folder to take a look at the available modules for the default 
theme. 


In the Magento 2.0 structure, we have three main files that manage the theme 
behavior, which are as follows 


* composer. json: This file describes the dependencies and meta information 
* registration. php: This file registers your theme in the system. 
* cheme. sm; This file declares the theme in system and is used by the 


Magento system to recognize the theme 


All the theme files inside the structure explained previously can be divided into 
static view files and dynamic view files. The static view files have no processing by 
the server (images, fonts, and „js files), and the dynamic view files are processed by 
the server before delivering the content to the user (template and layout files) 
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Static files are generally published in the following folders: 
/pub/stat ic/frontend/<Vendor>/<theme>/<language> 
+ ctheme_dir>/media/ 


© «theme dirs/weh 





{For further information, please access the official Magento theme 
structure documentation at http: //g00.g1/ov310J, 


The Magento Luma theme 


‘The Magento CE 2.0 version comes with a new theme named Luma that implements 
Responsive Web Design (RWD) practices 
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The Luma theme style is based on the Magento user interface (UI) library and uses 
CSS3 media queries to work with screen width, adapting the layout according to 
device access. 
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The Magento Ul is a great toolbox for theme development in Magento 20 and 
provides the following components to customize and reuse user interface elements: 
* The actions toolbar 
+ Breadcrumbs 
+ Buttons 


* Drop-down menus 


+ Forms 
* Icons 

+ Layout 
+ Loaders 


+ Messages 


= Pagination 


* Popups 
+ Ratings 

* Sections 

* Tabs and accordions 
+ Tables 

+ Tooltips 


* Typography 
* Alistof theme variables 


The Luma theme uses some of the blank theme features to be functional. The Magento 
20 blank theme, available in the vendor /nagento/thene-frontené-blank folder, 

is the basic Magento theme and is declared as the parent theme of Luma. How is this 
possible? Logically, Magento has distinct folders for every theme, but Magento is too 
smart to reuse code; it takes advantage of theme inheritance. Let's take a look at how 
this works. 


Magento theme inheritance 

‘The frontend of Magento allows designers to create new themes based on the basic 
blank theme, reusing the main code without changing its structure. The fallback 
system is a theme's inheritance mechanism and allows developers to create only 
the files that are necessary for customization. 
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The Luma theme, for example, uses the fallback system by inheriting the blank 
theme basic structure, The Luma theme parent is declared in its theme хк] file 
as follows: 


«theme xmins:xgi-'http://www.w3.org/2001/XNLSchema-instance* xsi:noNam 
espaceschemaLocation-"urn:magento:framework:Config/etc/theme хайн» 





«titlesMagento Lumac/title» 
<parent sMagento/blanke/parent> 
medias 
«preview inage»media/preview.ipge/preview image» 
<+/пеайа> 
</sheme> 


Inheritance works similar to an override system. You can create new themes using 
the existent ones (parents) and by replacing (that is, overriding) an existing file with 
the same name but in your specific theme folder (child) 


For example, if you create a new theme in the app/design/ 
frontend/<Vendor>/cthene>/ folder and declare Magento/blank as a parent 
theme, the eene хт] file and registvation.php, you have the entire blank theme 
structure ready to work in your new theme, including RWD layouts and styles 


Let's say that you have a specific .ces file available in the «theme dir»/web/css 
folder. If you delete this file, the fallback system will search the file in the <parent_ 
thene_dir>/web/ces folder, as shown in the following figure: 





Theme Inheritance 
Example 





Magento 
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CMS blocks and pages 


Magento has a flexible theme system. Beyond Magento code customization, the 
admin can create blocks and content on the Magento admin panel, such as Home 
Page, About us, or any static page that you want to create. CMS pages and blocks 
оп Magento give you the power to embed HTML code in your page. 


‘You can create or edit pages and blocks by accessing the Admin area 
(http: //localhost /packt /admin_packt) by navigating to Content | Pages. 





Pages а а diver 
а SEES) © vear gen 


























Custom variables 


Custom variables are pieces of HTML code that contain specific values as 
programming variables, By creating a custom variable, you can apply it to multiple. 
areas on your site. An example of the custom variable structure is shown here: 


(conti path="web/unaecure/base_url")) 


This variable shows the URL of the store. 
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Now, let's create a custom variable to see how it works. Perform the following steps: 
1. Open your favorite browser and access the admin area through 
http://localhost/packt/admin packt. 
Navigate to System | Custom Variables 
Then, click on the Add New Variable button. 





[Custom Variables а а дт 








4. Inthe Variable Code field, enter the variable in lowercase with no 
spaces—for example, dev. name. 


5. Enter the variable name, which explains the variable purpose. 


6, Enter the HTML and plain text values of the custom variable in the 
Variable HTML Value and Variable Plain Value fields and save it 





New Custom Variable 
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Now, we have a custom variable that stores the developer's name. Let's use this 
variable inside the CMS About Us page via the following steps: 


In the Admin area, navigate to Content | Pages 
Click to edit the About Us item. 

Then, click on the Content side menu. 

Click on the Show/ Hide Editor button to hide the HTML editor. 
Put the following code at the end of the content: 


{(Custonvar code="dev_name"}) 


Finally, save the content. 








Content 


Content 


Heading Алые 


‘Show / Hide Editor 


«GN class="about-info ems-content™> 

+р clase="ems-contertmportant=With more than 230 stores spanning 43 states and 
growing, Luma + a national recognized acive wear manufacturer and realer 
Мевахое passionate about act ve lifestyles &ndash; and Ir goes way beyond appare. 
bris 

Sp» Luma, wellness is a way of life, We donBrsquor believe age, gender or past actions 
Челпе you, олу your ambition and desire for wholeness. today «p» 


рле diferentiate ourselves through a combination of Unique designs and styles merged | 


Wem unequaled standards of qualty and autnentiiy. Gur founders have deep roots yoga 
nd health communities and aur selections serve amateur practitioners and professional 
мев аер 
style: none; margin-top: 20р; padding: 07» 
"(tore ur contact) Contact Lumaefa»«ll» 
tustomerservice y »Customer Service</a></l> 
'oriacy-poliy УУ »Luma Privacy Policy ca» </i> 
"I >Shop Lumaca><i> 








Śp> Developer: Customvar code="dev.name" «ip» 
as 
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Lets 


take a look at the result in the following screenshot: 











About us 


With more than 230 stores spanning 43 states and growing, Luma is a 
nationally recognized active wear manufacturer and retailer. Were 
passionate about active lifestyles - and it goes way beyond apparel. 


A Lua, nets a vay f e We dot bien ae, pende or past actos define you oniy youram bon and 
бешге er wholeness. today. 


We diferentiate ourselves through а continaton of unique desis and styles merged with unequaled standards 
unit and элепаелу Our founders have deep rot yoga amd heh communes snd our selections serve 
tes practitioners and professional aes аке. 


тартуу 


Shop Lua 


Dbaweloper mande | 











Creating a basic Magento 2.0 theme 


After understanding the basic Magento 2.0 theme structure, you have the right 


credentials to go to the next level: creating your own theme. In this chapter, we 


vill 





develop a simple theme and activate it on the Magento Admin panel. The basic idea is 
to give you the right directions to Magento theme development and provide you with 
the tools to let your imagination fly around the creation of various Magento themes! 


Before starting the creation, let's disable Magento cache management. It is important 
when you work with Magento development to get updates in real time. You learned 
about cache management in Chapter 2, Magento 2.0 Features: 


1 


Open the terminal (Linux, OS X) or command prompt (Windows) and access. 
the «your Magento install dir»/bin directory. 


Then, run the php magento cache:disable command to disable all the 
cache systems. 
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Creating and declaring a theme 


To create a basic theme structure, follow these steps: 
1. Create a new vendor directory named Packt at the following path 
Magento root directory>/app/design/frontend/Packt 


2. Under the Packt directory, 
executing the following: 





create the theme directory named basic by 


Magento root directory>/app/design/frontend/Packt/basic 


‘The next step is to declare the theme information for Magento to recognize it as a 
new theme. Perform the following: 
1 Open your preferred code editor (Sublime Text2, TextMate, Atom.io) 


2. Create a new file named theme хп] under your theme directory 
(app/deeign/frontend/Packt/basic/theme. xml). 


3, Use the following code in the theme xml file and save the file: 





www org /2001 /200 


urnimage i:Contig/atc/theme. 












«parentoMagentc/blank«/parent» 
1025 emedias 








»media/preview.ipge/previ. 





Limages 





е 
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This is a basic declaration for the Magento system to recognize our theme as an 
official theme. This code configures the theme name, parent, and preview image. 
‘The preview image is a preview for basic visualization purposes. We don't have 
a preview image right now, which is the why the code is commented; avoid 
unnecessary errors, 


Once we have the basic configurations, we need to register the theme in the. 
Magento system: 


1. Open your preferred code editor (Sublime Text2, TextMate, or Atom.io). 
2. Create new file named registration php under your theme directory 
(app/design/frontend/Packt /basic/registration.php) 
3. Use the following code in registration.php and save the file 
<?php 
je 
+ Copyright © 2016 Magento. А11 rights reserved. 
+ See COPYING.txt for license details 
\Magento\Pranework\ Component VConponentRegistrar::register( 
\Magento\Pramework\ Component \ConponentRegistrar: :THENE, 
'frontend/Packt/basic' 
EN 


This code simply registers our theme in the Magento system by passing a parameter. 
of your new theme's structure directory. 


Simple product image configuration 

In your theme, you can configure the image properties of the products in the 

Magento Catalog module by creating ће view.xm1 file. You can control this 

specific configuration using the id attribute of every product's HTMLS element: 
Open your preferred code editor (Sublime Text2, TextMate, or Atom io). 


2. Create a new directory named etc under your theme directory (app/ 
design/frontend/Packt /basic/etc) 


3. Create a new file named view. xni under your ete directory (app/design/ 
frontend/Packt /basic/etc/view.xml) 


4. Then, use the following code in view. хап and save the file: 


image id-"category_page_grid® type-"small image*» 
<width>250</width> 
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<height>250</height> 
</image> 


In the view. xml file, we declared the values of the width and height of the product 
image. The id and type attributes specified the kind of image that this rule will be 
applied to. 


[% For further information, visit http: //g90.1 /731082. ] 


Creating static files’ directories 

The static files (images, .js files, . с=в files, and fonts) will be stored in the web 
directory. Inside the web directory, we will organize our static files according to its 
scope. Create a new directory named web under your directory app/design/ 
frontend/Packt/basic/web theme and create the following directory structure: 





‘app/design/frontend/Packt/basic/ 








Q web 
а еу 
Q sources 
а fonts/ 
0 dmages/ 
о 57 





With this simple structure, you can manage all the static files of your custom theme. 


Creating a theme logo 


By default in Magento 2.0, the theme logo is always recognized by the system by 
the name 1999. svs. Magento 2.0 also recognizes the logo's default directory as 
ethene dir»/web/images/1ogo.svg. So, if you have a logo. svg file, you can 
simply put the file in the right directory. 


However, if you want to work with a different logo's name with a different format, 
you have to declare it in the Magento system. We will make a declaration with this 
new logo in the Magento Thee directory because the new logo is a customization 
of the Magento, Theme module. We will override this module by taking advantage 
of the fallback system. As you may note, Magento has a specific pattern of declaring 
elements, This is the way in which Magento organizes its life cycle. 
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Let's declare a new theme logo by performing the following steps: 


1 


Choose one logo for the example and save the file as 1690. png in the арр/ 
design/frontend/Packt /basic/Magento Theme/web/images directory. 
Open your preferred code editor (Sublime Text2, TextMate, or Atom.io). 
Create new file named default хт] under your layout directory (app/ 
design/frontend/Packt /basic/Magento Theme/layout)) 

Use the following code in default хт) and save the file 


«page xmlns:xsiz"http: //wwe.w3.org/2001/xMLSchema-instance" xsi:n 
ahiamespaceSchenaLocation-"urn:magento:framework:View/Layout/etc/ 
page configuration.xsd*» 

<body> 





<referenceBlock name="1ogo"> 
<arguments> 

<argument name-'logo file" xsi:type="string"> 
Magento Theme/images/10go.png 
</argunent> 

«argument nam 
your logo width 
</argunent> 
sargunent name="logo_ing_height" xsi:type="number"> 
your logo height 
</argunent> 





"logo img width" xsi:type- "mumber's 


</argunents> 
</referenceBlock> 
</body> 
</page> 


This declaration has three different arguments to manage three attributes of your 
new logo: filename, width, and height. Don't forget to replace the your_lego_wideh 
and your_logo_height attributes with the correct size of the logo that you choose. 


‘The 1ogo file argument seems to be wrong because we created our image in the 
Magento Thene/web/inages directory; however, thank God this is not true. I'll 
explain: when we activate the new theme, Magento processes the static files and 
copies them to the pub/st atic directory. This occurs because static files can be 
cached by Magento, and the correct directory for this is pub. So, we need to create 
the web directory for Magento to recognize the files as static files. 


Теа] 





Chapter 





‘The final theme directory structure i 


i illustrated as follows: 
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Applying the theme 


Once we have the theme ready to launch, we need to activate it in the Magento 


admin dashboard: 


1. First access the Magento admin area URL (http: //Locathost /packt/ 
admin_packt) in your favorite browser. 


2. Navigate to Stores | Configuration | Design. 
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3. Then, select the Basic theme option as your Design Theme value and save 
the configuration. 





Design Theme 





UserAgant ceptors Search Suing Design Theme Айн @ 





rece Tayo materi es 














Navigate to the home page of your site by accessing the http://localhost /packt 
URL to see the final result: 





[PACKT] 


PUBLISHING 














[56] 





Chapter 4 





Summary 


Now, you have all the basic concepts to create a custom theme for Magento and all 
the information to think in terms of the Magento structure when an idea for your 
new design comes to mind. 


In this chapter, you learned the basic concepts of Magento 2.0 themes, how theme 
inheritance (that is, the fallback system) works, and which directories Magento uses 
to create its themes according to the admin area configurations. Finally, you created 
your own basic theme with these examples. 


However, what about creating a quality theme? Is it possible with the knowledge 
acquired in this chapter? Of course! We will go to the next level in the next chapter 
and create a responsive theme by example. 
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Creating a Responsive 
Magento 2.0 Theme 


In the previous chapter, you learned the fundamentals of creating a custom Magento 
2.0 theme, and we created the basic structure by example. In this chapter, we will 
create our own theme project called the CompStore theme. 


The following topics will be covered in this chapter: 
* Developing the CompStore theme 
‘+ Introduction to Composer Dependency Manager 
+ CSS preprocessing with LESS 
* Creating new content for the CompStore theme 
* Developing a custom CompStore theme using CSS 


‘+ Creating a custom template 


The CompStore theme 


‘The CompStore theme project is the new Magento 2.0 theme that you will 
develop for a hypothetical computer store client or for a theme marketplace 
such as http: //themeforest .net /. I strongly suggest you to take a look at 

the Become an author page at http: //themeforest.net/become ап author 
in order to explore the options to monetize your Magento theme development 
expertise. Logically, you have to work harder before publishing and selling your 
‘own theme solution, but it will be worth it! 
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Magento 2.0 themes and modules work with the Composer (https: //getcomposer 
org/) dependency manager for PHP to generate a reliable deployment of Magento 
components. This is a great evolution in the Magento universe because this 
management can provide a powerful environment for the deployment of modules 
and themes. So, we will create а composer file for our new theme solution, 


Before we start the theme development, let's take a look at Composer. 


Composer - the PHP dependency 
manager 


Inspired by npm (https://www. pss. соту) and bundler (http: / /bundlez.io/), 
Composer (https: //get composer. org/) manages the dependencies of your project 
and installs packages in predetermined directories (for example, vendor) using the 
composer. json file in the Magento module or theme. This kind of management is 
very useful once each library has your specific dependency. Composer doesn't let 
you waste your time by connecting the dependencies to every deployment that you 
want to до. 














Dependency Manager for PHP 


Getting Started Download 
Documentation Browse Packages 
issues Github 
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In the next chapters, we will use Composer to install components on Magento, 
However, first, we will start the development of our theme; it is necessary to declare 
our com json file. For now, let's install Composer on the operating system, 





Installing Composer on Unix-like operating 
systems 


To install Composer on Unix-like systems (such as Unix, Linux, and OS X), you 
simply need to run these two commands in the terminal: 


$ curl -s https://getcomposer.org/installer | php 
$ sudo mv composer.phar /usr/local/bin/composer 


The first command downloads the composer. phar installation file. The second 
command moves the file to the bin directory to install Composer globally on 
your computer. 


Run the following command to check whether Composer was successfully installed: 


$ composer 





Thes comp: 
their descriptions: 


'ommand lists all the available Composer commands and. 
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Installing Composer on Windows 


То install Composer on Windows, you simply have to download and execute 
Conposer-Setup. exe, which is available on https: / /getconposer .org/Composer- 
Setup.exe, 








This executable file will install the latest Composer version and set up your path to 
use the composer command in the command prompt window. Open the command 
prompt window and run command. composer to get the list of available commands 
of Composer. 


Building the CompStore theme 

As you noted in the previous chapter, Magento can store different themes inside the 
same vendor scope. The proposal project called CompStore will be a template of the 
Packt vendor, This is the same vendor created in the previous chapter. 





First of all, itis important to build the theme directory in the Packt vendor directory 
(Magento root directory>/app/design/frontend/Packt /compatore). Create 
this folder as the following image suggests: 





Pockt/compstore/ 
Q ete 
Q Mogento_Theme/ 
Q^ loyouj 
а  medo/ 
а web/ 
D ey 
Q source/ 
Ә images! 











The etc directory usually handles the XML configuration of some components. 
The Magento_Thene directory will override the native Magento Theme module by 
adding new functionalities. The media directory will store the preview image of the 
‘CompStore theme. Meanwhile, the web directory would have store CSS and image 
files by now. 





The Compstore theme will have Luma as the parent theme. This example shows you 
the power of the abstraction used in Magento theme projects. Create the theme xn 
file in the Packt /compstore directory with the following code: 
«theme xnlna;xsi-"http://www.wi.org/2001/XMLGchema-instance" xai :noNam 
apaceschemaLocation-"urn:magento:framework:Config/etc/theme хайн» 
<titlescompStore Electronicsc/titles 
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parent sMagento/1uma</parent> 
medias 
preview inage»media/preview.jpg«/preview image» 
</media> 
</cheme> 


The theme snl file declares the title and parent of the CompStore theme. Create 
a simple preview. jpg image with a size of 800 x 800 and save it in the Packt / 
compstore/media directory. For example, the Magento logo is centered at the 
image size of 800 x 800. 


This image shows the preview of the new theme, but as you don't have a preview 
yet, you can create a placeholder for now. 


The next step is creating the registration. php file in the Packt /compstore 
directory with the following code: 


<?php 


\Magento\Framework\ Component \Conponent Registrar: :register ( 
\Magento\ Framework Component \Conponent Registrar: : THEME 
"frontend/Packt /conpatore! , 


In the registration php file, the CompStore theme of the Packt vendor registers 
the new theme of the Magento system. 


The theme. xm) and registration. php files were created earlier. By now, I think 
you are very comfortable with the structure of these files because you worked with 
them in the basic theme and now in the CompStore theme. This point forward, you 
will be introduced to some new concepts of theme development in Magento 20, 
starting with the creation of the composer. json file. Create the composer. json file 
in the Packt /compstore directory with the following code: 


{ 


"name": "packt/compstore*, 
"description*: "Compstore electronics theme", 
"require": ( 


"php*: *-5.5.0]-5.6.0]-7.0.0*, 
"magento/theme-frontend-luma': *-100.0* 
"magento/framework*: "-100.0* 

y 

"type": "magento2-theme* 

2.0.0", 





"license: [ 
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"0SL-3.0, 
"APL-3.0* 

1, 

"sutolead": ( 


"files": [ *registration.php" 1 


This file has the . json (sttp: //www.json.org/) format and handles important 
information of the project and its dependencies. As we discussed earlier, this 
kind of control is crucial because it generates more organization for your project 
Let's navigate to the principal parameters of the composer . json file: 
+ Name: This refers to the name of the component. 
* Description: This provides the description of the component 
* Require: These are the dependencies of the project (the PHP version and the 
Magento libraries) 
+ Type: This describes the type of component (the theme or module) 
* Version: This describes the version of the component 
+ License: This parameter describes the licenses applied on a component 
(Open Source License or Academic Free License) 
* Autoload: This parameter defines the files and classes that will be autoloaded 
upon component activation 


CSS preprocessing with LESS 

Before applying CSS in the CompStore Magento theme, it is important to study CSS 
behavior in the Magento system. The stylesheets in Magento 2.0 are preprocessed 
and compiled to CSS using the LESS technology. LESS (ht tp: / /lessces.org/) is 
а CSS preprocessor that extends the CSS traditional features by including variables. 
and functions to generate a powerful CSS code and saves the time in maintaining 
the code. 


All the . tess files that you will save in your theme are compiled by the LESS engine 
but you will always declare „css in the Magento theme frontend. Here are a couple 
of examples: 


* Frontend declaration: <ces ere="ces/atyles.ces" /> 


+ Root source file: «Magento theme dir»/web/css/styles.less 


For further information, access the Magento 2.0 official documentation at 
http: //goo.gl /X1XOcQ. 
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Applying new CSS to the CompStore 
theme 


А CompStore theme inherits the Luma theme, which in turn inherits a blank theme, 


as shown here: 
(m CompStore Inheritance 


Magento 











Once you have to make changes in CompStore in order to customize the new theme, 


you can think about the functionalities already available in the other themes to apply 
your changes. 





‘The vendor directory under the Magento 2.0 root directory handles all the native 
Magento modules and themes. The Magento blank and Luma themes, which you 

have been working on until now, are available in vendor /magento/thene- frontend- 
blank and vendor /nagento/thene-frontend-1una, respectively. So, the CompStore 
theme "receives? all the features of the themes under these folders. It's important to fix 
these basic concepts to understand the context that you inserted when you developed а 
Magento theme solution. 





Once you have a solid concept about the behavior, lets create a custom . css file for 
the CompStore theme: 


1. Copy the packt /vendor/magento/theme-frontend-blank/web/css/_ 


styles. less file to the packt /app/design/frontend/Packt /conpstore/ 
web/css location 
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2. Open the copied file and insert an import command as the following example: 
aimport 'source/lib/ lib.less'; 
aimport 'source/ sourcem.less'; 
aimport 'source/ components.less* 
Gimport 'source/compstore.less!; 


Save the file. 


Now, open your favorite code editor and create the conpstore. less file 
under the packt /app/design/frontend/conpstore/web/css/source 
directory and type this code: 

acolor-compatore: #Р6РЄРЄ; 


возу{ 
background: acolor-compstore; 


} 


5. Using override, let's change the product page color schema by creating the 
theme. Less file under the packt /app/design/frontend/compatore/web/ 
Gss/source directory. Execute the following: 

//Change color of elements in Product Page 

acolor-catalog: #4A96AD; 

apage_background-color: acolor-catalog; 
asidebar_background-coler: acolor-gray40 

aprimary color: acolor-gray80; 

aborder-color base: acolor-gray76; 

alink color: scolor-grayS6; 

alink hover color: acolor-gray60; 

abutton_color: acolor-gray20 

abutton background: acolor-gray80; 

abutton border: 1px solid aborder-color base; 
abutton-primary background: ecolor-orange-redl; 
abutton-primary border: 1px solid Gcolor-orange-red2 
sbutton-primary color: acolor-white; 
abutton-primary hover background: darken(acolor-orange-redi 
sus 

abutton-primary hover border: 1рх solid acolor-orange-red2; 
abutton-primary hover color: acolor-white; 
anavigation-levelü-item color: acolor-gray80 

assbmenu-item color: ucolor-gray80; 

amavigation background: acolor-gray40; 
anavigation-desktop-levelü-item color: acolor-gray80 
anavigation-desktop-levelü-item hover color: acolor-gray34; 
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anavigation- 





anavigat ion-de: 
desktop-level0-item 
Gtab-contrel  Backgrcun: 
background: acolor- 
color 
уз; 
iolor-grayéo 









Gpage backgrcund-color; 








With the compstore. less and _theme. less files, the background and product page 
colors will change according to the new proposal of the CompStore theme. 


Creating the CompStore logo 


You can create a new logo for learning purposes using the Logomakr free online 
service (http: / /1ogonakr..con/). It's a pretty easy tool. 





pore 


= 


° == Burger 


UU Restaurant & Grill 








I created this logo for the CompStore theme using Logomakr: 


m CompStor 
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My CompStore proposal of the logo was made in Logomakr, which is a solution 
developed by Webalys (http://www. streanlineicons. com) and Flaticon 
(http://www. flaticon. con) and licensed under Creative Commons by 3.0 
(http: //creativeconmons .org/1icenses/by/2.0). If you use this solution 
for other projects, don't forget to give the due credit to Logomakr. 


After finishing the logo, save it under the app/design/frontend/Packt/ 
compstore/Magento Theme/web/images/logo.png path 


You can feel free to use your own solution for logo instead of using Logomakr. 


Applying the theme 

As you learned in the previous chapter, it's time to activate the new theme. Activate 
the CompStore Electronics theme in the Admin area (http://localhost /packt / 
admin packt)to see the following result: 





CompStore 











‘Sometimes, when you update in the Magento structure or activate a new theme, you 
need to deploy the theme and module changes. If you want to deploy your changes, 
follow these steps: 


Open the terminal or command prompt. 


Delete the packt /pub/static/frontend/<Vendor>/<thene>/<locale> 
directory. 

Delete the var /cache directory. 

Delete the var/view preprocessed directory. 

Then, access the packt /bin directory. 


Run the php magento setup:static-content:deploy command, 
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7. In some cases, it is necessary to give write permissions again to 
the directories, 


Creating CompStore content 
Once the new theme is activated, it's time to handle the content by creating some 


options and configuring the products and categories. 


To create new categories, you will need access the Admin area (http://localhost / 
packt /adwin packt) and follow this recipe: 


Navigate to the Products | Categories menu. 


2. Delete all the subcategories of Default Category by clicking on them and. 
pressing the Delete Category button. 
3. Create three new subcategories of Default Category named Notebook, 


Desktops, and Peripherals. Be sure to set to Yes the Include in Navigation 
Menu option for each category. 


In the Add Category option, you have option to fill the Description, Page Title, and 
Meta Information areas for SEO purposes, as shown in the following screenshot: 
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The Best Brand on CompStore. 


WYSIG Editor 
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To create new products, you will need access to the Admin area 
(http://localhost /packt /admin_packt) and follow this recipe: 


1. Access the Admin area (http://localhost /packt/admin_packt) and 
navigate to Products | Catalog. 

Click on the Add Product button. 

In the New Product page, enter all the required Product Information input. 
Set the values of Price and Quantity categories, 

Choose an image to upload. 

6. Choose In Stock for the Stock Availability field. 

7. Choose Main Website in the Websites tab. 

8. Saveyour new product. 

9. You can add three to nine products for testing purposes. 





Thumbnail Name мб» e Quaniy Wisi 
ams Pii smpe әк Primea sanoo 10000 Catalog 
“ pe search 
ama Primara Simple бей ттш: 8000100000 сию 
+ коза өп 
жез Destop озше Dei ооо 10090 саш 
ш: тоа Search 








Magento has а widget management system that allows the flexibility of the content. 
‘The widget helps create a specific list of new products in the home page. To create a 
new widget, follow these steps 


1. Navigate to Content | Widgets 
2. Click on the Add Widget button 
3, Then, in the StoreFront properties, perform the following: 


1. Select CMS Static Block as Type and Compstore Electronics as 
Design Theme. 
2. Туре Home Page in the Widget title field. 
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3. Select the All Store Views option. 





“Storefront Properties 


Wwe 


Design à 
PadkagerTheme 


Widget Tie + | Home Pare 


КАИС ө 
Views T | Maln Website 
Main Website Store 


sororder | 0 











4. In Layout Updates, select the following options: 


© For the Display on field, select the Specified Page option 


In the Page field, select the CMS Home Page option 
? In the Container field, select the Main Content Area option 
© The Template field should be CMS Static Block Default Template 








Layout Updates 


Disisyon species Page - 
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Template 
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4. In Widget Options, perform the following: 
1. Select Home Page Block. 
2. Then, click on the Save button. 





[Widget Options 


Block « Home Page Block 














‘The default block configuration contains the images and products of the Luma 
theme. Let's change it via the following steps: 

1. Navigate to Content | Blocks. 

2. Click to edit Home Page Block 

3. In the Content field, enter the following HTML code: 


<div clam 





locks-promo*» 


Sa class- block promo hons-main" href-"|[store url=") jnotebook 


html"> 
<img src=" ({media url. 





wysivyg/home-main. jpa*)}" ale="" /> 


<span class-"content bg-white"><span class="info">New Desktop 
available!</span> 

estrong class="title"sNew Brands</strong> 

<span class-'action more button" sShop New Desktop</span> </span> 
</a> 

</div> 


"content-heading"> 
title" sNew Productae/h2» 
nfo">Here is what's trending on Compstore nowe/p» 





4. Position the cursor under the last line of the HTML code and click on the 
Insert Widget icon, as shown in the following screenshot: 
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5. Select Catalog Products List as Widget Type. 


Тт] 





Сирт 





6. Select all the categories created earlier in the Conditions field. 





Conditions АШ ofthese conditions are TRUE 


Category в | 41,42,43 өе 


D 





re] 
абре 


заш Desktops) 














7. Click on the Insert Widget button. 
8. Ifyou prefer, you can change the image of the block. 
9. Finally,click on the Save Block button. 


Go to the Home page to see the final result: 





CompStore 
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Customizing Magento 2.0 templates 


Magento works with .phtm1 template files to generate the view layer for the users, 
The modules and themes in Magento have its specific group of .phtmt files to show 
data to the users. Let's create a custom template example in the CompStore theme to 
see how it works: 


1 
2 


в. 


Create the Magento Catalog directory under the compstore theme directory 


Copy the contents of vendor/magento/mod: 
templates to app /design/frontend/Packt /competore 


alog/view/frontend/ 












t /compatore /Magen: 
to. html file in your favorite 


Then, open the app/design/rontend/p. 
Catalog/templates /product /view/add 
code editor. 





Go to Line 17 and enter the following code: 
<divoch2>Buy in CompStore! !!</h2></div> 

Save the file 

Delete the var/view_preprocessed/ and pub/static/frontend/Packt/ 
compstore/ directories 

Deploy static content files by running the php magento setup: static 


content :deploy command 





If necessary, give write permission to the pub directory 


Navigate to the product page to see the result, as in the following screenshot: 











Notebook 1 
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Summary 


With the content learned in this chapter, you can now develop your own themes 
and customize solutions. The modern developer creates tools that can maximize 
the quality and minimize the effort to develop. 


Asa suggestion, try to read Chapter 4, Magento 2.0 Theme Development ~ the Developers’ 
Holy Grail, again to create specific Magento pages and layout rules for the CompStore 
theme. You have uncountable possibilities to develop quality themes for Magento 
e-commerce and a great solid path to specialize more and more. 


Now that you have all the tools to develop a theme for Magento, we will start 
discovering how to write Magento extensions by programming specific solutions 
in the next chapter. 
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Write Magento 2.0 
Extensions — a Great 
Place to Go 


In the previous chapter, we created a custom Magento 2.0 theme called CompStore. 
However, what do you think about extending our Magento expertise by creating our. 
‘own extension? In this chapter, we will create a new extension called TweetsAbout, 
add a brand new functionality in our theme, learn the main concepts of Magento 
extension development, and take a look at how the extension packaging process works. 


The following topics will be covered in this chapter: 


Magento development overview 
‘The Zend framework basics 

‘The Magento 2.0 extension structure 
The Twitter REST API 

Twitter OAuth 


* Magento extension project - TweetsAbout 
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Magento development overview 

Magento is an MVC-based application divided into modules. Each module has 
specific job inside Magento, following a mature software pattern. For example, 
Magento has a specific module to control product shipping. This kind of approach is 
very important to create new functionalities and have the flexibility and modularity 
to extend its power 


Using the Zend framework 


According to Zend Framework Case Study available at https://www. zend. com/ 
topics/Magento-CS. pdf, the Magento project chose to go with industry-standard. 
PHP and the Zend framework because of the extremely simple, object-oriented, and 
flexible solution that encapsulates best practices and agile testing methodologies and 
that would result in a very rapid development of enterprise-grade web applications. 


Using the Zend framework as the main pillar in the Magento project definitely 
includes the following advantages: 
* Magento contributors around the world know the Zend framework 


* There is great web services support to integrate Magento with different 
software solutions in order to share data 


+ The MVC design pattern helps organize project development. 


With the Zend framework, Magento has great flexibility in creating and customizing 
modules, developing new features for the system, and maintaining the core code. 


A basic understanding of Zend components could be interesting for developers to 
take advantage of this great MVC framework. 


You can learn more about Zend framework at http: //framework. zend. com/. 


Magento 2.0 extension structure 

Magento 2.0 is a modular system as you can see. That is why it is important 

to maintain all the code organized, and it couldn't be different with Magento 
extensions. In previous chapters you saw all the directory structure of Magento, 
but now let's give special attention to the basic Magento module file structure: 
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Module File Structure 





Magento 


0 app/<Vendor>/<Module> 
Ail 

Block/ 

Controller 

etc 

Helper/ 

Hie 


Model 
Plugin 
composer Jeon 
LICENSE.txt 
LICENSE_AFL txt 
README то 
registralionpho 











In order to create a new extension according to the preceding image, we must 
create the same directory structure. However, how will they interact with the 
Magento system? 


Some of these directories have an important role to play in the Magento system. 
They are directories that are responsible for providing basic functionalities and 
coupling between modules and the Magento system: 


Block: Blocks are View classes that are responsible for providing 
visualization layers between the logical and frontend layer. 


Control ler: These control all the actions of the Magento. Web servers 
process the requests and Controller redirects them to specific modules 
according to the URL. 

etc: This stores all the module XML configuration files. 


Helper: This stores auxiliary classes that provide forms, validators, 
and formatters, which are commonly used in business logic. 


Model: This stores all business logic and the access layer to the data. 


Setup: Setup classes are classes that control installation and 
upgrading functionalities 
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The other directories support additional configurations and implementations of the. 
module; these are as follows: 
* api: This directory contains classes to control the API's layers 
‘+ алза: This directory contains files responsible for translating 
(internationalization) the module view layer 
* Plugin: This directory handles plugins if necessary 
* view: This directory handles all the template and layout files 


‘The files presented in the root directory are files on which you worked before. The 
LICENSES and README files are those available for extension distribution purposes 


Developing your first Magento extension 


Now, you have a general concept of creating a new extension for Magento. As а 
scenario to our development, we will create a simple extension called TweetsAbout 
to communicate with Twitter via the API and get the latest tweets with the #magent 
#packtpub, and #php hashtags. 





We will have two simple pages; the first will show а link to the results, and the 
second will show the tweets. 


Let's get to work! 


The Twitter REST API 


Representational State Transfer (REST) is an architecture created to provide a 
simple communication channel between different applications over the Internet 
using mainly the HTTP protocol. It is the hottest data technology nowadays. 
Facebook, Google, Twitter, and a lot of huge companies have adopted REST 
applications. With REST APIs, you can read, post, and delete data. 


‘Twitter has a specific format to spread its data on the Web in order to create great 
integration with different kinds of applications that consume its service. According, 
to Twitter Developers Documentation available at https : //dev.twitter.com/ 
rest /publ ic, Twitter REST APIs provide programmatic access to read and write 
Twitter data. You can author a new Tweet, read an author profile or follower data, 
and more. The REST API identifies Twitter applications and users using Oauth, 
and the responses are available in JSON. 


Before beginning to code the Magento extension, let's create an account on Twitter 
Developer to authenticate our new application on the Twitter platform. 
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Create а new account in Twitter (https://twit 
and access the Twitter Developer page (https :/ /áev 
following screenshot: 





/) if you don't have опе 
itter.cem/),as in the 





HEBES 


Customer 
Service 





We have a lot of options on the developer's website, such as gathering real-time 
data, crashlytics, and mopub. I strongly suggest that you take a good look at these 
tools later. 


So, let's create a new application to consume Twitter services. Access the URL 
hetpe: //apps.twitter.com/ to create a new Twitter application. In order to use 
‘Twitter's public API services, you need to identify your application by generating 
a token and a secret key. 








You can create a new application by clicking on the Create New App button and 
filling in the form with the following required fields: 


+ Name: Choose a unique name for your app 
* Description: Describe your app 


+ Website: Provide a personal website/URL. 
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Accept the Developer Agreement to finish your app registration and click on the. 
Create your Twitter Application button. 








Create an application 


‘Application Details 











You can access your application's configurations by clicking on the name of your. 
application. Later on in this chapter, we will discuss how to get the right credentials 
to integrate our application with Twitter. 


Now, we can finally start our Magento 20 extension solution, 


The TweetsAbout module structure 


Create the following basic directory structure for the project 





тиед Module 
Structure 





Magento 
pp /Pockt/TweeteAbout 
7] 

Blocks 

Centroter/ 

ES 

serene] 

мен 

composer son 

[i 

LICENSE АНА 

D READMERS 

2 regstetienghe 
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Using TwitterOAuth to authenticate our 
extension 


The TwitterOAuth (https: //ewitteroauth .com/) library provides communication 
with Twitter via an APL In the TweetsAbout project, this kind of communication is 
essential for the final proposal of our extension solution. TwitterOAuth is the most. 
popular PHP library to use with the TwitterOAuth REST APL 





This project is also available on GitHub (https: //github.com/abrahan/ 
twitteroauth), as shown in the following screenshot: 











GitHub = pepe к 
































To install TwitterOAuth on the TweetsAbout extension, follow this recipe: 
1. Open the terminal or command prompt. 


2. Under the packt /app/code/Packt /Tweet about /Api directory, run the 
composer require abraham/twitteroauth command. 





[23] 


Write Magento 2,0 Extensions - а Great Place to Go 





3. Access https: //apps. twitter. con/, click on your application, and click on 
the Keys and Access Tokens tab to get the following: 


^. Consumer Key (API Key) 
Consumer Secret (API Secret) 
^ Access Token 


© Access Token Secret 


We'll need these credentials to use on our extension later. 


Developing the module 


To start the module development, we will declare the basic module configurations. 
Open your favorite code editor, create a new file called module. xml, and save the 
file in app/code /Packt /Tweet eAbout /etc. Enter this code in the file: 


<?xml version="1.0"?> 

«config xmins:xsi-"http://www.w3 .org/2001/XMLSchema-instance" xsi:no 

NamespaceSchenaLocation-"urn:magento:framework:Module/etc/module xsd'» 
<module name-"Packt TweetsAbcut" setup versicn-"2.0.0*/» 





</config> 


Magento 2.0 works with Uniform Resource Names (URN) schema validation to 
reference XML declarations, as you can observe in the «conf ig» tag. The module 
хай file works by validating whether your module declaration follows the module 
declaration schema. 


The «module tag contains the vendor and module name. Always follow this 
example of module name declaration: vendor. Modul». 





Under app/code/Packt /Tweet sAbout /etc/£rontend, create two new files, 


as follows: 
+ routes ml 


+ events xml 
The routes xni file contains the following code: 


<?xml version="1.0"2> 

«config xnlns:xsi="http: //waw.w3.org/2001/xMLSchema-instance" xsi:noNa 

nespaceSchenaLocat ion="urn :magento: framework: App/etc/routes.xsd"> 
«router id 





etandara"> 
module mame-"Packt TweetsAbout* /> 





tweetsabout" frontName-"tweeteabout "> 
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</route> 
</router> 
</config> 


The routes .xni file tells Magento where to look for the controllers (TweetsAbout/ 
Controller) when the URL http://localhost /packt /tweet sabout is accessed 
(МУС) 


The events xni file contains the following code: 


<?xml veraion="1.0"2> 
«config xmins:xsi-"http://www.w3.org/2001/XMLSchema-instance" xsi:noNa 
mespaceSchenaLocat ion="urn :magento: framework: Event /etc/events.xsd"> 

event name-"page block html_topmeny_gethtml_before"> 

<observer name="Packt_TweetaAbout_observer" inetance-"Packt\ 

‘TweetsAbout \Observer\Topmenu" /> 

</event> 
</config> 





The events xni file declares an Observer event handler in the module, and this 
file has the mission of configuring a new TweetsAbout top menu link to access the 
module in the frontend. Observer listens to events triggered by the user or system. 
The «event» tag gets basic information of the top menu Block to be handled later in 
the PHP code, and the «observer» tag declares the Topnenu observer class. In this 
chapter, we will take a look at how the Topmenu class works. For now, it's important 
to declare this option. 


For further information about Observer, access the Magento official documentation 
athttp://goo.gl/ocTamn, 


Now, itis time to create the registration. php file under the root directory of 
TweetsAbout. Run the following code: 


<?php 

Magento Framework Component \ComponentRegistrar: :register ( 
Magento Vramework Component VConponentRegi strar: :MODULE 
"Packt TweetsAbout! 
om 





The registration. php file has the same role as that of theme registration in 
Magento System. 
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Create the composer . json file under the root directory of TweetsAbout via the 
following code: 


А "name": "packt/tweets-about", 
"description": "Example of Magento Module - Packt Publishing", 
"суре": "magentol-module" 
"version". "2.0.0", 
"licensen: [ 
"081-3.0*, 
таны-з:о* 
"requirens { 
"рыр": *-5.5.0]-5.6.0]-7.0,0*, 
"тазепта/ггашематк": "200.0", 
vabrahan/twitteroauth": "70.6.2" 


1 
PAutelcad*: { 

"files" [ "registration.php" 1 
"perna ( 

"Packt \\Tweetsābout\\": "* 
у à 
матан: { 


"installer-paths*: ( 


) 


"app/code/Packt/TweetsAbout/Api*: [*abraham/twitteroauth") 


) 


You can observe in the composer. json file the declaration of the TwitterOAuth 
project as a required package to our extension. Also, the file defines the installation 
directory. 


You can copy the LICENSE, txt and LICENSE_AFL. txt files from the Magento root 
directory to your Packt /Tweet sAbout directory. The README. md file is responsible 
for storing information about the module's scope and some considerations for the 


purposes of publishing on GitHub (http: //github.com/). You can feel free to 
create the README ma file as you wish, 





For further information about Composer packages, refer to 
the link https: //packagist .org/. 


For now, we have the module declaration and registration files. It's time to create the 
controllers to start giving some life to the TweetsAbout module. 
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Controllers 


First, let's create а new file named Index. php. This file will control the access to 
the initial page of the module. Save it under app/code/Packt/TweetsAbout/ 
Control ler/Tadex/ with the following code: 


<?php 
namespace Packt\Iweet sAbout \Controller\ Index; 
class Index extends \Magento\Pramework\App\Action\Action{ 
protected $resultPageFactory; 


public function _ construct ( 
\Magento\Framework\App\action\Context $context, 
\Magento\Framework\View\Result\PageFactory 
SresultPageFactory 
ПА: 
Sthis-»resultPageFactory = $resultPageFactory, 
parenti; construct($context) 


} 


public function execute()[ 
return $this-»resultPageFactory-»create() 
} 


} 


Create another file named Index.php under app/code/Packt /Tweet sAbout / 
Control ler/Magento/. This file will control the access to the Magento Tweets 
page of the module. Save it with the following code: 


<?php 
namespace Packt\Tweet sAbout \Controller\Nagento; 
class Index extends \Magento\Pranework\App\Action\act ion( 
protected $resultPageFactory; 
public function _ construct ( 
\Magento\Franework\App\action\Context $context, 


\Magento\Franework\View\Result\PageFactory 
SresultPageFactory 
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re 
Sthis-»resultPageFactory = $resultPageFactory, 
parenti; conetruct($context) 





} 


public function execute()[ 
return $this-»resultPageFactory-»create() 
} 


| 


Create another file named Index.php under app/code/Packt Tweet sAbout / 
Control ler /Packt /. This file will control the access to the Packt tweets page 
of the module. Save it with the following code: 


<?php 
namespace Packt\Tweet sAbout \Controller\Packt; 
class Index extends \Magento\Framevork\App\Action\act ion( 
protected $resultPageFactory; 


public function __construct ( 
\Magento\Franework\App\action\Context $context, 
\Magento\Franework\View\Result \PageFactory 
SresultPageFactory 
Fy 
$this->resultPagePactory = $resultPageFactory: 
parent; construct (§context) 


} 


public function execute()[ 
return $this-»resultPageFactory-»create() 
} 


} 


Create another file named Index.php under app/code/Packt /Tweet sAbout / 
Controller /Php/. This file will control the access to the PHP tweets page of the 
module. Save it with the following code: 


<?php 
namespace Packt\Tweet sAbout \Controller\Php; 


class Index extends \Magento\Pramework\App\Action\act ion( 
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protected SresultPageFactory; 


public function _ construct ( 
\Magento\Framework\App\action\Context $context, 
\Magento\ Framework \View\Result\PageFactory 
SresultPageFactory 
wg 


$this->resultPagePactory = $resultPageFactory; 


parent::_ construct (Scontext) ; 
} 
public function execute(] 
t 

return $this->resultPageFactory->create () ; 
| 


) 


Magento 2.0 uses namespaces аз a PHP standard recommendation (http://www. 
php-fig.org/psr/) to avoid name collisions between classes and to improve the 
readability of the code. So, in the namespace instruction, we will declare the class 
path to follow the PSR-4 pattern (http://wuw.php-fig.org/psr/psr-4/). 


The extends functionality (inheritance) of \Magento\Franework\App\Action\ 
Action provides a functionality to handle actions triggered by the URL access. 

For example, when the user enters the URL ht tp: //<nagento_url>/tweetsabout, 
the routes soi file redirects to the Tndex/ Index. php controller to treat the user 
request made by accessing the URL. 


The dependency injection of the | construct () method —\Magento\Franewor'e\ 
App\Action\Context $context and \Magento\Framework\View\Result\ 
PageFactory $resultPageFactory—declares the initial construct of the Act ion 
class and the view layer to work with the template file. 


САС For further information about the dependency injection, access the 
GES Magento official documentation at http: //90о gt / Tar? 


Finally, the execute () method renders the layout. We will declare the layout files 
later on. 


At this point, it's important to be familiar with PHP object-oriented programming, 


(bttp: //php -net /manual /en/ language .сорэ php). I strongly suggest that you 
study the main concepts to increase the understanding of the book. 
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Blocks 


Blocks in Magento 2.0 provide presentation logic for your view templates. In the 
TweetsAbout project, we will use two blocks to process the view template files. 





Under the app/code /Packt /Tweet sabout /81ock directory, create a file named 
Index. php with the following code: 





<?php 
namespace PacktVIweetsAboutVBlock 
class Index extends \Magento\Framework\View\Element\Tempiate( 


publie function getMagentoUril()| 
return $this-»getData (‘urlMagento') ; 
} 


public function getPHPUrl()[ 
return $this-»getData'urlPHP'); 
} 


public function getPacktUr1 () ( 
return $this-sgetData ('urlPackt') 
} 


| 


The three methods, getMagentoUr1 (), get PHPUz1 (), and getPacktUr1 (), get data 
from layout declaration files to define a URL for each kind of controller and give it to 
the initial layout of the module. 


Now, under the app/code /Packt /Tweet sAbout /Block directory, create a file named 
‘Tweets php with the following code: 


<?php 
namespace Packt\TweetsAbout\Block: 


require $_SERVER['DOCUMENT_ROOT'] . "/packt/app/code/Packt/ 
Tusetskbout/Api/vendor/autolcad.php*; 
use Abrahan\TwitteroAuth\Iwitteroauth: 


class Tweets extends \Magento\Franework\View\Element \Template( 


private $consumerkey; 
private $consumerSecret; 
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private $accessToken; 
private $accessTokenSecret 


public function searchTweets () ( 
Sconnection = $this-stwitterDevauth() 


$result = Sconnection-»get("search/tweets", array("q" -»Sthis- 
ogetData(‘hashtag'), "result type'e»"recent*, "count" => 10)); 


return $result-»statuses; 


) 


private function twitterDevauth() { 
Sthis-»consumerKey = YOUR CONSUMER KEY; 
Sthis-»consumerSecret = YOUR CONSUMER SECRET; 
Sthis-»accessToken = YOUR ACCESS ТОКЕН; 
Sthis-»accessTokenSecret = YOUR ACCESS ТОКЕМ SECRET; 


return new TwitterOAuth$this-»consumerKey, $this- 
sconsunersecret, Sthis-»accessToken, Sthis-»acceseTokenSecret]; 
) 
} 


Here are some things to consider about the Tweets. php code: 
* The required instruction is to call the autoload, and the use is to append the 
namespace of the Twit teroauth library to work on our extension 
+ Inthe twitterevauth() method, you must enter the Twitter API credentials 


In the searchTweets () method, the $connection->get ("search/tweets", 
array("q" «»Sthis-»getData('hashtag'|, "result type"c»"recent* 
"count" => 101) instruction works with the Twitter search API, getting the 
last 10 results of Twitter posts 





Observer 


Under the app/code /Packt /Tweet sabout /Observer directory, create the Topmenu 
php file with the following code: 


<?php 
namespace Packt\\Tweet sAbout \Observer; 

use Magento\Franework\Bvent \Observer as EventObserver; 
use Magento\Framework\Data\Tree\Node; 

use Magento\Framawork\Bvent VObserverInterface; 
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class Topmenu implements ObserverInterface( 


* aparam BventObserver Sobserver 

* ereturn $this 

du 
public function execute (EventObserver Sobserver] 


{ 


Surlinterface = \Magento\Framework\App\ 
objectManager: :get Instance () -»get ( ‘Magento\Framework\Url Interface!) 


$active = strpos(SurlInterface-»getCurrentUrl(), "tweeteabout") ; 


/** avar \Magento\Framework\Data\Tree\Node $menu */ 
$menu = Scbserver-»getMenu(] 











Stree = Smemu-»getTree(]; 
$data = [ 
"name! => _("ТиегкздьошЕ"), 
ча > Ttweetenenu* 
тш! > SurlInterface-»getBaseUrll) 


Iis active! => $active 





mew Node($data, 'id', Stree, $menu) 
Smenu-»addChild($node] ; 
return $this: 


) 


The тортеп „рї file dynamically creates а new top menu item for the TweetsAbout 
module by adding a node in the top menu link schema. The \Magento\ 
Franework\App \ObjectManager : :get Instance () -»get (‘Magento\Framework\, 
Urlinterface!) instruction gets the base URL and the current URL to create a 
specific link to the TweetsAbout module. The Topmenu observer works with the 
Document Object Model (DOM) concept of nodes and trees dynamically. 
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Views 

It's time to handle the presentation layer of the project. First, we will create the 
layout files ( m1) to handle template behavior and to pass arguments to the 
template via blocks. Every layout file is assigned by following this pattern: <module_ 
name>_<ccontroller>_<controller_file>.xml. This pattern allows the Magento 
system to assign the correct files according to its controller automatically. 


Under the app/code /Packt /Tweet sabout /view/frontend/Layout path, create the 
tweetsabout index index.xml file with the following code: 


<?xml version="1.0"2> 
"http: //www.w3 .org/2001/XMLSchema- instance" 
column" xsi :noNanespaceschemaLocat ion="urn:magento: framework. 
View/Layout/etc/page_configuration.xsd"> 

<head> 








<title> 
Tweetshbout Module 
</title> 
</head> 
<body> 
<referenceContainer name="content"> 
«block class="Packt\TweetsAbout\Block\ Index" 
"Packt TweetsAbcut::index.phtml"» 
argumenta» 
argument name="uriMagento" xei:type="url" 
Path-'tweetsabout/magento" /> 
argument name-"urlPHP" xeitype-"url" 
path-"tweetsabout/php /» 
argument name-"urlPackt" xei:type-"url" 
path-"tweetsabout/packt* /» 


template 





</argunente> 
«лоск» 
«/referenceContainers 
</body> 
</page> 


The <biock> tag binds the Index.php Block to the index.phtml template, and the 
<argunents> tag transports three URL parameters to the Block. These parameters 
will be used in the index. phtm! file. 
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Under the app/code /Packt /Tweet sabout /view/frontend/Layout path, create the 
tweetsabout magento index.xml file with the following code: 





<?xml versio 
«page xmins:xsi. 


Let 
http: //wes.w3 .org/2001 /XMLSchema- instance" 














layout="icolum" xsi :noNanespaceschemaLocat ion="urn:magento: framework: 
View/Layout /etc/page_configuration.xsd"> 
<head> 
<title> 
Tweetshbout #Magento 
</title> 
«свв arc="Packt_TweetsAbout : :ces/source/module.ces*/> 
</head> 
<body> 


<referenceContainer name="content"> 
«block class="Packt\TweetsAbout\Block\Tweeta" 
template="Packt_TweetsAbout : :tweets.phtml "> 
argumenta» 
«argument name-'hashtag" 
xsi:type="string">#magento</argument> 
</argunente> 
«лоск» 
«/referenceContainers 
</body> 
</page> 





Under the app/code /Packt /Tweet sAbout /view/frontend/Layout path, create the 
tweetsabout packt index.xml file with the following code: 





<?xml version="1.0"2> 


http: //wew.w3.org/2001/xMLSchema-instance" 








«page xmine:xsi- 








layout="icolum" xsi:noNamespaceSchemaLocation-"urn:magento:framework: 
View/Layout /etc/page configuration.xad"» 
<head> 
<title> 
Tweetskbout #Packtpub 
</title> 
<css arc="Packt_TweetsAbout: :ces/source/module.ces*/> 
</head> 
<body> 


<referenceContainer name="content"> 
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«block class="Packt\TweetsAbout\Block\ Tweets" 
template="Packt_TweetsAbout : :tweets phtml"> 
arguments» 
«argument name-'hashtag" 
xsi:type="string">#packtpube/argunent> 
</argunente> 
«blocks 
«/referenceContainers 
</body> 
</page> 


Under the app/code /Packt /Tweet sabout /view/frontend/Layout path, create the 
tweetsabout_php_index. xm! file with the following code: 


<?xml version="1.0"2> 
<page xmins:xsi="http://www. w3 org/2001/XMLSchema- instance" 
layout="icolum" xsi:noNamespaceSchemaLocation-"urn:magento:framework: 
View/Layout /etc/page_configuration.xsd"> 

<head> 








<title> 
Tweetskbout #РНР 
</title> 
«свв arc="Packt_TweetsAbout : :csa/source/module.css*/> 
</head> 
<body> 
<referenceContainer name="content"> 
«block class="Packt\TweetsAbout\Block\Tweeta" 
template="Packt_TweetsAbout : tweets .phtml "> 
arguments 
cargument name-'hashtag" xei:typ 





string">#php</ 
arguments 
</arqunente> 
«лоск» 
</referenceContainer> 
</body> 
</page> 


The «css tag loads the CSS rules of the template. The «b1ock» tag binds the 
‘Tweets. php Block to the tweets.phtm! file. The cargument nane="hashtag"> 
tag transports the hashtag parameter to the Tweets -php Block to search the latest 
mentions of the specific hashtag in the Twitter database. 
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Now, let's create the template files. 


Under the app/code /Packt /Tweet sabout /view/frontend/tenplates path, create 
the index.phtmi file with the following code: 


chisRecent Tweetsabout: </h2> 


<ul> 
<li> 
<a href="<?php echo $block-»escapektn] ($block->getMagentoUrl ()) 
<span><?php echo __('Magento') ?></span> 
</a> 
</li> 
is 
<a href="<?php echo Sblock-sescapelttml(Sblock-»getPacktUrl()) ?>"> 
espans«?php echo  ('Packtpub')?»«/span» 
</a> 
nis 
<li> 
<a href="<?php echo Sblock-»escapelttml(Sblock-»getPHPUrl()]) ?>"> 
<span><?php echo __('PHP')?></apan> 
</a> 
</li> 
</ul> 


The sb1ock object has access to the methods of Block/Tndex. php, and the URL 
of the pages build dynamically. 


Under the app/code/Packt /Tweet About /view/frontend/templates path, 
create the tweets .phtml file with the following code: 


<?php 


Stweets 





Sblock->searchTweets() ; 


<?php foreach (Stweets as $tweet)[ ?» 
<p clas 
<a href="<?php echo $tweet-»user-»url; ?>"> 
<img вкс="<?рыр echo Stweet-»user-profile image url; ?»" 
alt="profiler> 
</a> 
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<b>Created: </b><?php echo $tweet->created_at; ?> 
<br /> 


<br /> 


<a href="<?php echo isset ($tweet->entities->urls [0] ->ur1) ? 
Stweet->entities-suris(0]-surl : "4#"; ?>" target="_blank"><?php echo 
Stweet-stext;?></a> 


</p> 
<hr /> 
<?php } ?> 


The searchTweets () method loads tweets according to the URL accessed, and PHP 
processes the data to show the results to the user. 


css 


Under the app/code /Packt /Tweet sabout /view/frontend/web/css/source path, 
create the module. Less file with the following code: 


tweet (background-color: #878787; padding:lSpx; border:1px dotted) 
tweet a (color: &ffffff) 
tweet a:hover (text-decoration: underline;) 


Deploying the module 
To deploy the module, follow this recipe: 
1. Open the terminal or command prompt. 
Access the packt /bin directory. 


Then, run the php magento module:enable --clear- 
Packt_TweeteAbout command. 





Run the php magento setup:upgrade command. 
Next, run the php magento setup:static-content :deploy command. 


In some cases, it is necessary to give wri te permissions again to 
the directories. 
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If everything goes alright, when you access the URL http: //10ca1host./packt, you 
will see one link for the Tweet eAbout extension in the topmost menu. Just click on it 
to see how the extension works. Take a look at the following screenshot: 


Г] CompStore 
Le 




















You can navigate to the links to see how the pages work, as in the 
following screenshot: 
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‘The extension gets the ten last tweets in real time with the date, picture, and post. 
It's really awesome to watch our work running! 


For sure, this extension can get a lot better, but itis only a starting point for 
big achievements. 
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Magento Connect 

Once you have your extension ready to work, you can publish it in the Magento 
Connect service (ht tp: //wmv.nagentoconmerce .con/nagento-connect) 
Magento Connect is a service in which Magento members can share their 

‘open source or commercial extensions with Magento Community. The main 
contributions are generally based on the following: 


+ Modules 
+ Language packs 
+ Design interfaces 
+ Themes 


Packaging and publishing your module 


Once you have the composer json file configured, you can package your module by 
compacting it asa . zip file in the vendor-name package-name-1.0.0.zip format. 


Upload the module in your personal account in GitHub, and Magento can retrieve it 
to publish, 


For further information, it's strongly recommended that you to access the official 
documentation available on the Magento Developers official site at http: //devdocs 
magento. con/guides/v2.0/extension-dev-guide/package_module html, 


Summary 


You worked on a lot in this chapter! Congratulations. Now, you have solid grasp 
of the concept in Magento 2.0 extension development. You can note that Magento 
development has strict rules, but once you learn the basics, you can master Magento 
with hard work and study. Keep the good work going! 


Asa suggestion, try to read the official documentation and do projects that demand 
more user interaction, such as the admin panel and development of dynamic 
formularies. You can even increase the power of TweetsAbout. The sky is the limit! 


In the next chapter, we will start to work with Magento mobile by testing and 
configuring some great options. See you! 


[100] 





Go Mobile with Magento 2.0! 


Nowadays e-commerce stores must be responsive and mobile friendly to increase 
soles according to the huge number of people using mobile devices to buy products 

and services. It's very important to know the right tools to provide a mobile-friendly 
Magento theme for your project. Let's go mobile with Magento! 


The following topics will be covered in this chapter: 


+ Why mobile and responsive? 

* Testing the website on different devices 

* The Google Chrome DevTools device mode 

+ Responsive web designer tester extension 

+ Adjusting the CompStore theme for mobile devices. 

+ Adjusting tweets for mobile devices. 
According to a research called State of Mobile Commerce Growing like a weed Q1 
2015 conducted by Criteo (http: //www.criteo.con/),a digital marketing company, 
mobile accounts for 29% of ecommerce transactions in the US and 34% globally. 
By the end of 2015, mobile share is forecast to reach 33% in the US and 40% globally. 
This research is available at http://www. cri teo. com/media/1894/criteo-state 

-q1-2015-ppt.pdf. 





of -mobile-commer. 








This is one of the main reasons for which all Magento developers must create. 
responsive designs. We started this process indirectly by creating a new theme 
with Webcomm Magento Boilerplate. Despite its basic mobile support, we have 
to make some adjustments to create a completely responsive Magento theme. 
Let's return to work! 
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Testing the website on different devices 


In order to test your website in different devices and, consequently, different screen 
sizes, itis recommended to use a specific software or service to simulate the screen 
sizes of devices. If you perform a search on the web, you may find a great number 
of online test tools, but these tools work only with published websites. Our Magento 
site works, for now, on our local development environment. 





To take advantage of our local development environment, let's work with the 
Google Chrome DevTools Device Mode and the Responsive Web Designer 
Tester extensions. In this book, we'll have two options to work with mobile 
theme development. You choose both of them! 


If you don't have Google Chrome installed, download it from the URL 
https: //www.google .con/ int /en/chrome/browser/desktop/ to install it 
оп your operating system. 


The Google Chrome DevTools device mode 


Google Chrome DevTools is a native tool of Google Chrome that provides a bunch 
of tools for web developers. By working with DevTools, you can optimize your 
frontend code, including HTML, CSS, and JavaScript. 


Before accessing the DevTools extensions, access your Magento CompStore website 
at the http://localhost /packt URL. 





To access DevTools, in the Google Chrome browser, follow these steps: 


1. Click on the Google Chrome menu. 


2. Click on the More Tools option. 
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3. Click on the Developer Tools option. 





ТЕП events Corals эзи мино Tre Pate Wann UU 








sources Content scripts Snippets E " CX 
EIS > ten +e 
"баа комен | Hit Cmd+P to open afile | Cal stack 





oman) и 








СГТУ 
Ө v чарте т BPreserve og 

















Now, you can see the DevTools window, as in the preceding screenshot. 
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To activate Device Mode, click on the smartphone icon next to the Elements 
menu item. Now, you can see the page rendering with different options, as in 
the following screenshot: 


nem pm 


@ 


According to the Google DevTools official page available at he tps: //developers 





goo: 





e con/web/ tool a/chrome-devtools/iterate/device-mode/, you can use 
the DevTools device mode to do the following: 

* Test your responsive designs 

* Visualize and inspect CSS queries 

* Use a network emulator to evaluate site performance 


+ Enhance your debugging workflow 
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The DevTools extension has the following options to enhance developer experience: 


* Device preset 
+ Network connectivity 
* Inspecting media queries 
+ View CSS 


* Ааа custom devices 


Changing the device preset 


To change the device preset, click on the Device options: 


‘You can choose from among iPhone, Google Nexus, Samsung Galaxy, and 
Blackberry, and you can create custom devices to test the screen size. 


Device 


Б E 


Network connectivity 


This option emulates various network conditions of your website access. 


Network 
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Inspecting media queries 

‘The media queries are responsible for defining the CSS rule for each screen size. 
You can access all of these using DevTools. To access media queries, click on the 
icon in the upper-left comer: 








Web Fundamentals бите! Documentation ~ Toole 








Viewing CSS 
Right-click on a bar to view the CSS media query rule. You can make adjustments in 
the CS5 code: 








Notebook 1 
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Adding custom devices 

To create custom devices, follow these steps: 

In the Developer Tools topmost menu, click on Settings. 
Click on the Devices tab. 

Then, click on the Add Custom Device button. 

Fill the form according your need. 

Next, click on the Add Device button. 





Settings — Devices 


Gener Emulated devices 





Sla: (Phone) CRU Phone ©З 7 О ket 














‘Ada devie | Caneel 











Now, you have your own device to test your code. 
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Responsive Web Designer tester 

Now, open the Google Chrome browser and navigate to the address 

https: //chrome. google .com/webstore/category /apps to access 
Chrome Web Store. Conduct a search to find the Responsive Web Designer 
Tester extension and then add the extension to Google Chrome, as follows: 








ET. Responsive Web Design Tester Г оон а) 
eem 














Great work! Now, let's take a look at how this extension works. On your browser, 
go to your Magento local site, also known as CompStore, by accessing http: // 
localhost /packt, Remember that you have to turn on Apache Service in XAMMP 
to test the local website. 


Click on the button of the Responsive Web Designer Tester extension shown on the 
right-hand side of your screen (generally near the end of the browser address bar) 
and select the iPhone 5— Portrait option for the first test: 
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After you select the device, you will see a pop-up window having the size of iPhone 5 
screen, Navigating on the page, you will see also that the layout is not fully responsive. 
We have some issues in the home page presentation: 
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Now we have a tool to test site behavior between the different devices. It is time to 
make our CompStore theme 100% compatible with multiple devices! 


Adjusting the CompStore theme for 
mobile devices 


Both the Magento 2.0 native themes, Blank and Luma, use Responsive Web Design 
(RWD) to provide good visualization in different devices, such as desktops, tablets, 
and mobiles. 


In spite of the fact that the CompStore theme inherited the Luma theme, you can 
customize the template and CSS codes, as we discussed in Chapter 6, Write Magento 2.0 
Extensions = a Great Place fo Go. So, what do you think about improving the CompStore 
theme to make it more user friendly? 


The actual mobile version of CompStore has some differences in the desktop version, 
including colors, elements positioning, and image size. Before creating some mobile 
standards for the CompStore theme, it's important to fix some CSS responsive design 
concepts of Magento. Let's get to work! 


The Magento 2.0 responsive design 

To handle accessibility for different devices, the Magento 2.0 native themes (Blank 
and Luma) work with an RWD engine, as we discussed in the Chapter 4, Magento 2.0 
Theme Development - the Developers! Holy Grail, and Chapter 5, Creating a Responsive 
Magento 2.0 Theme. The stylesheets engine provided by the LESS preprocessor is the 
main utility responsible for this design approach. 


‘The Magento 2.0 native themes were built based on the Magento UI library. 
The Magento Ul library works with CSS 3 media queries to render a page with 
predefined rules according to the device, which requests the page. An example of 
media queries would be one that applies a specific rule for screens with a maximum 
width of 640 px; take a look at the following code: 


Smedia only screen and (max-width: 640px) ( 
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With media queries, the themes apply breakpoints to handle different screen-width 
rules for different screen sizes of devices in a progression scale of pixels, as follows: 

+ 320 px (mobile) 

* 480 px (mobile) 

* 640 px (tablet) 

* 768 px (tablet to desktop) 

* 1024 px (desktop) 

* 1440 px (desktop) 


For further information about media queries, refer to the W3C official documentation 
available at https://www. w3 .org/TR/cas3-mediaqueries/ 


The Magento UI 


‘The Magento 2.0 system works with the LESS CSS preprocessor to extend the 
features of CSS and enable the opportunity to create theme inheritance with 
minimal and organized effort. With this premise, to help theme developers, 
we have the Magento UI library in Magento 20. 


The Magento Ul library is based on LESS and provides a set of components to 
develop themes and frontend solutions: 

+ Actions toolbar 

+ Breadcrumbs 

+ Buttons 


* Drop-down menus 


+ Forms 
* Icons 

+ Layout 
+ Loaders 


+ Messages 


= Pagination 


* Popups 
* Ratings 
* Sections 


* Tabs and accordions 


[E 
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* Tables 

+ Tooltips 

* Typography 

* Alistof theme variables 


Another important resource of the Magento UI and of LESS is the mixin capability. 
The mixin allows developers to group style rules to work with different devices 
For example, consider that you declared the following CSS code in one determined file: 
media-width(sextremum, abreak) when (gextremum = 'max' and (abreak = 
азсгееп н) { 
exanple-responsive-block { 
background: вее 
) 
exanple-responsive-block:before { 
content: "Mobile styles '; 
font-weight: bold; 
) 
Then, you executed this CSS code in a different file 
media-width(sextremum, abreak) when (sextremum = 'min') and (abreak = 
Sacreen mi { 
exanple-responsive-block { 
background: fect 
) 
exanple-responsive-block:before { 


content: 'Desktop styles '; 
font-weight: bold; 


) 


In spite of the two files declaring a mixin named .media-wideh to the . ехапр1е- 
responsive-block class in different files, the mixin allows LESS to make a single 


query, grouping the rules instead of making multiple calls according to the device 
rule applied. 


You can access the local Magento UI documentation by accessing the URL 
http://emagento local url»/pub/static/frontend/Magento/blank/en US/ 
cs /docs/vesponsive.htmi. 
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, For further information about the Magento Ul take a look at the 
С Magento official readme nd file avaiable at ct pa: //gichub 
GES Coe nagento/magent 52/b1cb/2.0-0/Lib/veb/cdo/ docs 

source/README. та. 


Implementing a new CSS mixin 
media query 


First of all, lets take a look at the current mobile version of the CompStore theme. 
Using Chrome DevTools or Responsive Web Designer Tester, select an Apple iPhone 
5 (portrait) device to test the site. You will probably be redirected to home page: 


New Desktop avaiable! 


New Brands 
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In spite of the previous adjustment in the CompStore theme, when a mobile device. 
accesses a theme, CSS rules don't apply some important features, such as colors and. 
the positioning of elements. As a suggestion, let's create a standard declaration of 
color approach and configure CSS to show only one product when the mobile device. 
accesses the site. How can we implement these new features? Using media queries, 
of course! 


In your favorite code editor, open the conpstore. ess file available under the 
app/design/frontend/Packt /compstore /web/css/source directory and use 
the following CSS3 code: 


ucolor-compstore: #PSFEPS; 


озу 
background: acolor-compstore; 
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) 


media-width (extremum, abreak) when (Gextremin = 'max') and (abreak = 
Sacre s) ( 
oa 


background: acolor-compstore, 


} 


widget .bicck-premo ina{ 
height. 600px 


F 


products-grid .product-item ( 
width: 1008; 
display: inline-block; 


) 


media-width (extremum, abreak) when (Gextremin = "nin') and (abreak = 
ascreen s) ( 
ody 


background: scolor-compstore; 
) 

widget .bicck-promo img[ 
height, 600px; 

) 


products-grid .product-item ( 
width: 1008; 
display: inline-block; 


) 
The Magento UI break points predefined variables to identify the scope of media 


queries, which are as follows: 

+ ascreen_ xxs: 320 px 

* авсгееп xs: 480 px 

+ ascreen_ a: 640 px 

+ ascreen_m: 768 рх 

+ ascreen_1: 1024 px 

+ ascreen_x1:1440 px 
So, in the CSS 3 new proposal, the media queries use the ascreen_s variable 
to define the application of new rules. We will propose via mixin to change the 


background color, promo image size, and product size inside mobile rules for 
portrait and landscape purposes. 
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To apply the changes, follow this recipe: 
1. Save the file. 
2. Open the terminal or command prompt. 


3, Delete the packt /pub/static/frontend/<Vendor>/<theme>/<locale> 
directory. 


Delete the var/cache directory. 
Then, delete the var/view preprocessed directory. 
Access the packt /bin directory. 


Next, run the php magento setup:static-content :deploy command, 


In some cases, itis necessary to give write permissions again to the directories. 


Test the site again to get the new home page, as in the following screenshot: 






CompStore 


New Desktop available! 


New Brands 








Сирт 

















БЫШЫШ 
ae 
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Adjusting tweets about extensions for 
mobile devices 


The extension that we created in Chapter 6, Write Magento 2.0 Extensions - a Great 
Place to Go, tweets about extension and has the following appearance: 





CompStore 


tartare ne voua preparer eres. Mr tgs чирий зли gba pea 





Let's improve the CSS extension rules to turn it into a mobile-friendly one, 


Using Chrome DevTools or Responsive Web Designer Tester, select an Apple iPhone 
5— portrait device to test our code optimization. 


Open the nodule. 1ess file available under the packt /app/code/Packt/ 
‘Tweet sAbout /view/frontend/web/css/source directory and add the 
following code 


/+тегеєв About Style+/ 


media (min-width: 960px) { 
wrapper { 

width: 908; 

max-width: 1200p; 
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min-width: 800px: 
margin: 50px auto; 


} 


dcolumas { 
-webkit-column-count: 3; 
-webkit-column-gap: 10px; 
-webkit-column-fill: auto; 
-moz-column-ceunt: 3 
-moz-column-gap: 10px; 
-moz-column-fili: auto; 
column-count: 3; 
column-gap: 15рх 
colum-fill: auto; 


tweet { 
display: inline-block; 
background: #ЕЕРЕРЕ; 
border: 2px solid #PAFAFA; 
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4) 
margin: 0 2px 15px; 
-webkit-column-break-inside: avoid; 
-moz-column-break-inside: avoid, 
colum-bresk-inside: avoid; 
padding: 15px; 
padding-bottom: Spx; 
background: -webkit-Linear-gradient (4Sdeg, #FFF, #P9F9P9); 
opacity: 1; 


-webkit-transition: all .2s ease; 
-moz-transition: all .2s ease; 
-o-transition: all .29 ease; 
transition: all .2s ease, 


tweeting { 
wiat: 15%; 
display:block; 
float ‘left; 
margin: Op Spx орх Opi; 


sweet p ( 
font: 12px/18px Arial, sans-serif; 
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color: #333; 
margin: 0; 


) 


dcolumns:hover .ing:not (:hover} ( 
opacity: 0.4 


) 


After saving the nodule. 1ess file, change the tweets. рһет1 code available under 
packt /app/code/ Packt /Tweet sAbout /view/frontend/templates, change the file 
with this new code, and save it, as follows: 





<?php 
Stweets = $block->searchTweets (} ; 
<div id="wrapper"> 





<div id="columna"> 
<?php foreach ($tweets as $tweet){ ?> 
<div class="tweet"> 
<P> 
<a hre 
Stweet->user->id; 25" target 





https://twitter.com/intent/user?user_id=<?php echo 
blank". 





<img arc="<?php echo $tweets-»user-»profile image url; ?>" 
alt="profiler> 


<?php echo Stweet-»user-»mame; ?> 





</a> 
<br /> 
Created: <?php echo $tweets->created at; ?> 
<br /oebr /> 
<a href="<?php echo isset ($tweet->entities->urls[0]->ur1) ? 
Stweet->entities-suris(0]->url : "4#"; ?»" target="_blank"><?php echo 
Stweet->text;?></a> 
<?php echo Stweets->text;?> 
</a> 
</p> 
</div> 
<?php ) 2> 
</div> 
</aiv> 








To deploy the module update, follow this recipe: 


1. Open the terminal or command prompt. 
2. Access the packt /bin directory. 
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3, Then,runthephp magento module:enable --clear-static-content 
Packt_TweetsAbout command. 


Run the php magento setup:upgrade command, 
Next, run the php magento setup: static-content :deploy command. 
In some cases, itis necessary to give wri te permissions again to the 
directories (var and pub). 


Now, test the tweets about extension by accessing http://localhost /packt/ 
tweetsabout to see the new responsive look, as shown in the following screenshot: 





TweetsAbout #Magento 
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If you activate DevTools and choose an iPhone 5 device, you will see a result similar 
to the following screenshot: 







El 











Summary 


In this chapter, you learned about tools that provide you with a great environment. 
to develop Magento frontend themes. 


You also increased the power of CompStore CSS to handle access from specific. 
mobile devices. Of course, you can modify the code constantly to have a better 
experience by fine-tuning ín your code. However, this is only the beginning. 


In the next chapter, we will start configuring our Magento software, on which we 
have been working until now, to improve its speed. We will installing solutions 
and configure the already native Magento options. 
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Despite the existence of a great solution such as Zend Framework for its system, 
Magento 2.0 needs some fine tuning to get the best performance in order to provide 
the users with a better shopping experience. As you noted in the previous chapters, 
itis very important to focus on every aspect for successful e-commerce 


The following topics will be covered in this chapter: 


‘+ Magento Entity-Attribute-Value 
+ Indexing and re-indexing data 

+ Caching 

* Selecting the right Magento hosting service 
+ Apache web server deflation 

* Enabling the expires header 

+ PHP memory configuration 

* Optimizing the MySQL server 

+ Cleaning the database log 

+ Minifying scripts 

+ CDN for Magento 
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Magento Entity-Attribute-Value 


With a complex system architecture, Magento developers realized that a traditional 
development approach could be counterproductive for a scalable idea to implement 
an ecommerce solution. 





Developers, therefore, decided to adopt the Entity-Attribute-Value (EAV) 
architecture approach, 


This database structure embraces the Magento 2.0 complexity processes and variables 
and allows an unlimited numbers of attributes to any item, such as categories, 
products, costumers, addresses, and more. 


The three main points of EAV can be described as follows: 
* Entity: Data items are represented as entities. In the database, each entity has 
a record. 


+ Attribute: Many attributes could belong to a specific entity; for example, the 
customer entity has name, birth date, phone, and so on. In Magento, all the 
attributes are listed in a single table. 

* Value: This is the value of each attribute. For example, customer is an entity 
that has an attribute called name with the value Fernando Miguel 





























Entity Model | 
EAV Attribute. 
| : 
a) (ame) [NR] [Nowe 
2) es p p 


























This book is a hands-on guide to Magento, but I strongly suggest you to read more. 
about EAV in the Magento official documentation at http: //devdocs.magento 
con/guides/v2 .0/extension-dev-guide/attributes. html, 
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Indexing and caching Magento 


With the increase in content, images, and script demands for a better experience in 
e-commerce, we have to handle network consumption in order to provide fast access 
to our system, Search engines measure some technical points with their algorithms, 
and fast access is, of course, one of the requisites validated. 


Magento has a complex architecture and works with MySQL database constant 
queries to show specific products information, render pages, and process checkouts 
‘This high process volume demand can slow the download speed when your 
Magento 2.0 solution is in a production environment. 


‘To improve the Magento 2.0 performance, we can use two important tools: indexing 
and caching, 


Indexing and re-indexing data 

In the Magento 2.0 life cycle, at a determined point, we will have considerable 
megabytes of data on the MySQL database, including information regarding 
products, orders, customers, and payments. To improve its performance, 
Magento uses indexed tables to provide faster lookups. 


However, as your Magento 2.0 e-commerce grows, the indexation feature starts to 
lose performance too. 

In order to correct this issue, you can precompile database relationships using the flat 
table option in Magento, This technique combines EAV relationships for categories 


and products in one table to increase the speed of queries. To enable this feature, 
you can follow these instructions: 
Log in to your Magento backend (http://Localhost /packt /admin_packt). 
Go to Stores | Configuration | Catalog, 


Expand the Storefront option and select Yes for both Use Flat Category and 
Use Flat Catalog Product 


4. Next, click on Save Config. 





Use Flat Catalog Category ies E 








Use Flat Catalog Product 
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5, After the activation of the flat resource, you will probably get this 
Magento message: 
x 
А сент sever geo oe piri 








If you make changes to your catalog, product, or some page that has a relationship 
with indexers, the Magento system needs to re-index the information to keep the flat 


table schema working. You can manage the indexers with the Magento command. 
line tool, as follows: 


1. Open the terminal or command prompt. 


2. Access the packt /bin directory. Then, run the php magento 
indexer :reindex command. 

3. In some cases, itis necessary to give write permissions again to 
the directories. 


The reindex command rebuilds all the product, catalog, customer, and stock 
information. The index feature enables a fast return of data once the system has 


no need to process any basic data, such as product price, every single time that 
the user accesses the store. 


Did you notice in the preceding system message one issue about Magento cron job? 
Cron job allows you to automate this task and others to improve your efficiency. 
Let's take a look at how cron job works. 


For further information about Magento indexing, take a look at the 


con/guides/v2 .0 /extension-dev-quide/indexing.html 
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The Magento cron job 


Magento has important system processes that are very important to maintain the 
system's working at its full potential. These processes need automated executions to 
handle the updates made by the user and administrator. That is the why this feature 
is critical to Magento. 


Cron job works with UNIX systems and can schedule specific tasks to be executed 
ina predetermined time on the server. The following activities can be scheduled to 
execute on the Magento 2.0 system: 

‘+ The updating of currency rates 

+ Customer notifications 

* The generation of Google sitemap 

+ Price rules 

* Sending e-mails 


+ Reindexing 
‘To configure the cron job, follow this recipe. 
Find the php. ini file path. 


If you use XAMPP, as was suggested for a web server solution at the beginning of 
the book, you simply can use the XANPP/xanppfiles/etc/php. ini path. If you use 
a Unix-based terminal, you can use the command to find the PHP configuration file. 
Perform the following steps: 


Open the terminal 


2. Run the sudo crontab -u magento_user -e command; here, 
magento user refers to your syste 





3. Enter with the following instructions in the text editor that will show up: 
4/1 ^ * php -c ephp-ini-file-path» «your Magento install dirs/ 
bin/magento cronirum 


Mic * + + php -c «php-ini-file-path» «your Magento install dir>/ 
update/cron.php 


Mic * * * php -c <php-file-path> «your Magento install dizs/bin/ 
magento setup:cron:run 
Here's an example: 


4/2 ++ + + php -c /Applications/XAMPP/xamppfiles/etc/php.ini / 
Applications /XAMPP/xamppfiles/etc/php.ini /Applications/XAMPP/ 
htdoce/packt /bin/magento cron:run 
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XAMPP/xanppEile 
php.ini /Appli 





xampp 
fupdate/eran. php 
*/1 + * * * php -c /Appli 

Applications/XAMPD/htdocs, 





htdocs, 





ions /XAMPP/xanppfiles/etc/php. ini 
t/bin/magento setup:cron:run 








4, Run the sudo crontab -u fjmiguel -1 command to take a look at your 


new cron job configuration. 


5, Save the changes and exit the text editor. 
In some cases, it is necessary to give write permissions again to the directories. 


‘The +/1 + * * + configuration specifies that the cron job will be executed every 
minute. The cron job will now run in the background every minute. To manually 
execute the cron job, you can run the php magento cron: run command on the 

Magento command-line tool, as shown in the following figure: 





For further information about the cron job, follow the link at https: / /he1p ubuntu 
com/conmunity /CronHowto, 


For Magento cron, take a look at the official Magento documentation http: // 
devdocs .magento.com/guides/v2.0/ guide/cli/coní 
1. 









eld 
subconmands-cron.ht 





Caching 

While the indexing technique works on database layer, the caching feature does 
the same for the HTML page components to increase fast access to the frontend 
Caching stores this kind of data in order to provide the visitors with access to 
faster download. 


pus] 








pers 





To enable caching, you need to perform the following steps: 


1. Open the terminal or command prompt. 


2. Access the packt /bin directory 


3. Runthe php mage: 





ie enable command. 





For further information about cache configuration, follow the link at http: / / 


devdocs .magento.com/guides/v2 


/va .0 





subconmands-cache html. 
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You can work with third-party cache solutions to provide a better performance. 
Some of this solution has support and works very well with the Magento 2.0 
solution. This book doesn't cover server configurations, but I strongly suggest 
you to take a look at the following: 


* Redis can be found at http: / /devdocs .magento.com/guides/v2.0/ 
config-guide/redis/config-redis htm) 





‘+ Memcached session storage can be found at http: / /devdocs пазел 
con/guides/v2.0/config-guide/mencache/nencache.html 

* Varnish cache can be found at http: / /devdocs .magento.com/guides/ 
v2 .0/config-guide/varnish/config-varnish.html 


Fine-tuning the Magento hosting server 
Magento 2.0 has a complex structure, but it follows the good practices of software 
development, which gives the administrators and the developers of this fantastic 
‘e-commerce solution the real possibility to implement a scalable system to conquer 
а great site traffic and constantly increase the sales. 


Despite this advantage, all the scalable systems need a great server infrastructure. 
to provide fast content access through the Internet. 


Asa developer, you need to always think about all the stages that a successful. 
software needs to go through in an order to aggregate the real value to its 
administrator and to its users. Try to always see the big picture of your project. 


Let's take a look at some techniques and tips to increase your Magento server's 
capability. 


Selecting the right Magento hosting 
service 


First of all, we need to conduct a deep research on the existent solutions. We will try 
to gather information about clients of these solutions and test Magento's performance 
by accessing the Magento website as a visitor. 


‘The Magento official project website provides you with an online tool to search for 
Magento. You can use this tool by accessing the URL at http: //partners magento. 
con/partner locator/searci 
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Apache web server deflation 


Magento hosting services generally use Apache as a web server solution. Magento is 
written in PHP, and Apache has a mature environment to handle PHP processes. 


In order to give fast response to visitors! requests, we will use Apache's med_def late 
to speed up server response 


According to Apache's official documentation (stp: //attpa apache .org/ 
doca/2.2/mod/mod deflate.html), this module provides the deflate output filter 
that allows output from your server to be compressed before being sent to the client 
over the network. 


‘To enable this feature on your server, you need to create the htaccess file and enter 
the following code: 


«IfModule mod_deflate.c> 
ы ыы 


di enable apache served files compression 
# http: //developer.yahoo.con/performance/rules.htmlügzip 


# Insert filter on all content 


SetOutputPilter DEFLATE 
# Insert filter оп selected content types only 
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AddoutputFilterByType DEFLATE text/html text/plain text/xml text/ 
css text/javascript 


# Netscape 4.x has some problems 
BrowserMatch ^Mozilla/4 gzip-only-text/html 


# Netscape 4.06-4.08 have some more problems 
BrowserMatch ^Mozilla/4V.0[678] no-gzip 


# MSIE masquerades as Netscape, but it is fine 
BrowserMatch VbNSIB !no-gzip !gzip-only-text/html 


# Don't compress images 
SetEnvifNoCase Request URI V. (?:gif|jpe?g|png!$ no-gzip dont-vary 


d Make sure proxies don't deliver the wrong content 
Header append Vary User-Agent env-!dont-vary 


</TEModule> 
This adjustment reduces about 70% of the amount of data delivered. 


For further information about the -htaccess and mod_def late configurations, take 
a look at the links at http: //httpd. apache .org/docs/current /howto/htaccess 
html and http: //httpa apache .org/docs/2.2/mod/mod_deflate .htm1, 


Enabling the expires header 

Continuing to take advantage of the Apache web server, we will activate the 

mod expires module. This module sends a message to the client machine about 
the document's validity, and the client can store a cache of the site until the client 
receives a new message from the server expiration of data. This technique increases 
the speed of download, 


То activate this feature, you can open the htaccess file available in the Magento 
root directory and enter this block of code: 


«IfModule mod_expires.c> 
жининин 

99 Add default Expires header 

Жї http: //developer.yahoo.com/performance/rules htmifexpires 


ExpiresActive On 
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ExpiresDefault "access plus 1 year" 


</TéModule> 


For further information about the . htaccess configuration, follow the link at 
hetp://httpd apache .org/docs/2.2/mod/mod_expires. html. 


PHP memory configuration 

Increasing PHP memory by host configuration has a direct relationship with your 

contracted hosting service. Some shared hosting services do not give this option 

to the developers. This is one of the main reasons to choose a specialized Magento 

hosting service. 

Generally, this configuration can be done by adding the following code to the 
htaccess file available in the Magento root directory: 


«lfModule mod phps.cs 


н ARMED AME 
Gf adjust memory limit 


Php valus memory limit 256M 
Php value max execution time 18000 


</TEModule> 


Optimizing the MySQL server 

MySQL has the query cache feature to provide fast queries on a database. 

Once again, you need to conduct deep research on your possible hosting services 
before contracting any to make sure you have all the services you need for a great 
production environment. 


Before starting the optimization, refer to the PHP and MySQL documentations of 
your hosting service to check the availability of these changes 


Open the php. ini hosting service file and place these configurations: 


Resource 








max execution time = 30 Maximum execution time of each script 
in seconds 
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max input time = 60 ; Maximum amount of time each script may spend 
Parsing request data 
memory limit = 512M ; Maximum amount of memory a script may 


consume (8MB) 
query cache size = 64M 


[муза 
Please refer to http://php.net/manual/en/mysqli.configuration.php 
for further information 


Maximum number of persistent links. -1 means no limit 
mysqli.max persistent = -1 


Allow accessing, from PHP's perspective, local files with LOAD DATA 


mysqli.allow_local_infile = On 


Allow or prevent persistent links. 
mysqli.allow_persistent = On 


Maximum number of links. -1 means no limit 
mysqli.max_links = -1 


If mysqind is used: Number of cache slots for the internal result 
fet cache 


mysqli.cache_size = 2000 


Default port number for mysqli_connect(). If unset, mysqli_ 
Connect () will use 
the $MYSQL ТСР PORT or the mysql-tcp entry in /etc/services or the 
compile-time value defined MYSQL PORT (in that order]. Win32 will 
only look 
at MYSQL PORT. 
mysqli.default_port = 3306 


Default socket name for local MySQL connects. If empty, uses the 
built-in 


MySQL defaults 
mysqli.default socket - 


Default host for mysql connect(] (doesn't apply in safe mode] 
mysqli.default host 


Default user for mysql connect(] (doesn't apply in safe mode] 
mysqli.default user 


Default password for myaqli соппесь() (doesn't apply in safe mode) 
Note that thie is generally a *bad* ides to store passwords in this 
ипе, 
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tany* user with PHP access can run ‘echo get_cfg_var(*mysqli 
default pw"] 

; and reveal this password! And of course, any users with read access 
to this 

; file will be able to reveal che password as well 

myegli.default pw = 


г Allow or prevent reconnect 
mysqli reconnect = Off 


Now, let's configure the query. cache. si ге variable directly on the MySQL database. 


Open the phpMyAdmin web SQL console, and execute the SHOW VARIABLES LIKE 
‘query_cache_size'; query without selecting a database. The query will probably 
return the 0 value for the query, cache size variable. 


Execute the SET GLOBAL query cache size = 1048576; query and execute SHOW 
VARIABLES LIKE 'query cache size!; again. 


The query will probably return the following information: 





Show query box 


‘590% VARIABLES LINK "quar cacho sis 





L Profiting {Exit inline ][ Edi Create PHP code] Refresh ] 


|+ Options 
Variable name — Value 
Query cache size 1048576 











The query cache size variable was activated with success! 


For further information about the MySQL cache size configuration, follow the link at 
https: //dev mysql. com/doc/refman/5.0/en/query-cache-configuration.html. 


Even by testing these configurations in your localhost environment, you can feel the. 
huge positive difference between the first access in your Magento installation and the 
last access after the configuration. This is really awesome! 
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Minifying scripts 

Code minification is a technique to remove unnecessary characters from the source 
code. Minify your JavaScript (. s) and stylesheets (. сев) files and improve the load 
time of your site by compressing the files. 


In order to activate this process in Magento, navigate to the admin area 
(ntep://localhost /packt /adnin_packt) and follow these instructions 
First, navigate to Stores | Configuration | Advanced | Developer. 


2. Expand the JavaScript Settings options and select the Yes option for Merge 
JavaScript Files and Minify JavaScript Files, 


3. Expand the CSS Settings options and select the Yes option for Merge CSS 
Files and Minify CSS Files 


4. Finally, click on the Save Config button. 





sovasenp setongs 











рилет эзан tens ora 


жөнө fs 
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CDN for Magento 


Content Delivery Networks, also known as CDN, are servers of fast access for 
your static or non-dynamic content. JavaScript files and images are examples of 
files hosted on CDN servers. 


‘The main idea behind the use of CDN is saving the process time of your Magento 
server using a CDN solution. 


I suggest you to conduct research on hosting services that provide this integration. 
For example, Nexcess as a Magento partner company provides specific 
documentation about CDN integration on the URL https: / /docs .nexcess.net/ 
article/how-to-configure-cdn-access-for-magento. html. 








For JavaScript CDN, we have a free-of-charge service available on the Internet! 
This is thanks to Google for providing us with this amazing feature at 
https: //developers google .con/speed/1ibraries/ 


Summary 


In this chapter, you learned important lessons about how to improve Magento 
performance and pay attention to all the aspects that can make a positive difference 
in Magento development, including how to create a full-speed environment for 
Magento System. 





1 invite you to think in this very for now. We are progressing and walking through 
all the aspects of Magento: design, development, marketing, and performance. 

I feel comfortable to say to you, dear reader, that you have the tools to elevate 
your Magento professional career. Just keep continuing to study hard. 








In this chapter, you learned how to: 
‘+ Increase Magento performance in different aspects and technologies 
* Use the power of indexation and caching 


* Develop solutions to create a better Magento user experience through 
fast download techniques 


In the final chapter, we will explore some tools and ways to improve your Magento 
skills. See you! 
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We are at the end of the book, but this only the beginning of your walk through the 
Magento training. It's important to know some Magento extension options, but it 
is more important to build your own path in the Magento world by studying for a 
certification and achieving a new professional level. 


‘The following topics will be covered in this chapter: 


+ Magento Connect extensions 
‘+ Installing a Magento extension 
+ Debugging Gruntjs styles 

+ Magento knowledge center 


‘+ Improving your Magento skills 


Magento Connect extensions 


The Magento 2 0 architecture allows a natural improvement of native resources 
and the addition of new ones. Magento 2.0 is built based on the best software 
development practices. Its architecture is modular, which allows the development 
of extensions, as we discussed in an earlier chapter. 


Magento Commerce maintains a marketplace to provide Magento extensions known 
as Magento Connect (https://www .magentocommerce .com/magento-connect) 
Magento Connect includes extensions that provide new functionalities, such as 
modules, add-ons, language packs, design interfaces, and themes to extend the 
power of your store. 
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strongly suggest that you visit Magento Connect to get some ideas for personal 
projects and follow the extension development tendency in the marketplace. 


Installing a Magento extension 
Besides the Magento Connect marketplace, to search for Magento extension. 
solutions, you can access the extension options through your admin area, To access 
Magento extension options in your admin area, perform the following steps: 

1. Access your admin area at http: //1ccaihost/admin packt. 


2. Navigate to Find Partners and Extensions | Visit Magento Marketplaces, 





арена connect Magento Marketplace 








Once you choose the extension to install, Magento 2.0 offers two options for 
extension installation: 


© Installation via Composer 


^ Manual installation 
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To install the extensions via Composer, you need to configure composer. json 
to work with the Magento 2 Composer repository (http: //packages magento. 
con/) as a repository solution for Magento Core extensions. The composer already 
has the Packagist (https: //packagist .org/) configuration. To proceed with this 
configuration, perform the following: 

Open the terminal or command prompt. 

Go to the root directory of your Magento installation 

Rum the composer config repositories magento composer 

http: //packages magento. con command. 


To install a Magento extension via composer, do the following: 


Open the terminal or command prompt. 
Go to the root directory of your Magento installation 


Run the composer require <vendor>/<module> command. 





1. 
2 

3. 

4. An example of this is composer require Packt/TweetsAbout. 
5. Run the composer update command. 

6. Then, run the php bin/magento setup:upgrade command. 

$ 


In some cases, it is necessary to give write permissions again to the directories. 





tall a Magento extension manually, perform the following steps: 
1. Download ће. гір file of the module. 


2. Extract it and move it under the <nagento_root_directory>/app/code 
directory. 


Run the php bin/magento setup:upgrade command. 


In some cases, itis necessary to give write permissions again to the 
directories (for example, the var directory) 


Debugging styles with the Grunt task runner 
As you noted in the previous chapters, for every change that you apply in a Magento 
extension or theme styles, you need to clean the static files directory and deploy it to 
see the effect. This process takes time and unnecessary effort. So, what if you have a 
tool to automate this process? 


Dun 
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Grunts (step: / /grunt js. con/) is a task runner to automate tasks; for example, 
it provides productivity in Magento development by automating CSS changes. 
To install Grunt, follow these steps: 

Install Nodejs (st tps: //nede}s org) in your machine. 

Open the terminal or command prompt. 


Run ће при install -g grunt-cli command to install the Grunt 
command-line interface, 


4. Goto the packt / Magento root directory and run ће npm install grunt 





save-dev command. 
Still under the packt directory, run the npm install command, 
Then, run the npm update command. 


In your favorite code editor open, ће packt /dev/too1s/grunt /configs/ 
thene. js file, add the following code, and save it: 


module.exports = { 
blank: { 
area: ‘frontend’, 
name: 'Magento/blank', 
locale: 'en US*, 
Files: [ 
‘ess/styles-m' 
"сва/вку1ев-1' 
"сва/епаі1', 
'ess/email-inline' 


asi: lese 
} 
luma: ( 
area: ‘frontend’, 
name: 'Magento/luma!, 
locale: 'en_Us', 
Files: [ 
'ess/styles-m' 
‘ess/styles-1' 
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backend: { 
area: ‘adminhtml', 
name: 'Magento/backend!, 
locale: 'en_Us', 
files: [ 
'ess/styles-old! 
‘ess/styles! 


asi: lese 


H 


compstore: { 
area: ‘frontend’, 
name: 'Packt/compstore!, 


locale: 'en US*, 


files: [ 


"ees /atyles-m', 
'css/styles-1', 
'css/source/conpstore' 


asi: lese 


hi 


Once the Grunt environment is configured, it's time to test Grunt. Perform the 
following steps: 


1. Open the terminal or command prompt. 
2. Run the grunt exec: compstore command. 


3. Then, run the grunt 1ess:compstore command. 
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4, Runthegrunt watch command. 





These commands will create a direct channel with the possibility to edit your . c 
files on the fly. The grunt watch command shows you the update in real time. With 
"grunt watch’ still active in your lerminal/ prompt window, try to edit and save the 
body's background color in the app/design/frontend/Packt /compstore /web 
eas/source/conpstore. less file to see the result in the browser by accessing your 
base URL 
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Magento knowledge center 


The Magento team provides great resources of documentation in order to increase 
the Magento developer's knowledge. 





In the Magento documentation (http: //nagento.com/help/documentat ion), 
the user can access the USER GUIDES section for ENTERPRISE EDITION, 
COMMUNITY EDITION, DESIGNER'S GUIDE, and DEVELOPER 
DOCUMENTATION. 
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Is suggest that you, dear reader, study Magento's COMMUNITY EDITION, 
DESIGNER'S GUIDE, and DEVELOPER DOCUMENTATION in the first instance. 
These three documentations have solid concepts, and you can certainly take advantage 
by building your Magento concepts. 


@ Magento 


DOCUMENTATION 


Essential resource for 
Magento merchants and 
developers. 








Improving your Magento skills 

Welcome to the world of information technology! The professionals of this area 
need to study harder every single day. It's totally crazy how technology is always 
in mutation. New technologies and solutions come in a short period of time, and 
fessionals must be prepared all the time to keep an open mind, absorbing this 
situation assertively. 





Magento provides an official training program available at ht tp://nagento.com/ 
training /overview, You can access information about courses, and I strongly suggest 
that you think about Magento certification. Certifications can boost your career, 


To learn more about Magento certification, refer to http: //nagento.com/ 
training/catalog/certification You can download a free Magento study 
guide by visiting http: //magento. con/training/free-study-guide, 


You have a lot of options, such as books, articles, and blogs, to train and improve 
your Magento skills. Be persistent on your objectives! 
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Summary 


Congratulations! You won one more challenge; first, you acquired this great book, 
and then you completed the reading with merits. It was not easy, but I'm certain it 
was worth it 


In this chapter, you learned how to: 


* Manage Magento extensions 
* Test some Magento extension options 


* Build your own path to become a Magento success professional 


‘Thank you so much. I know you can climb the highest mountains; never lose faith in 
yourself. Good luck! 
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Thank you for buying 
Magento 2 Development Essentials 


About Packt Publishing 
Packt, pronounced packed’, published its first book, Mastering phpMyAdmin for Effective 


MySQL Management, in April 2004, and subsequently continued to specialize in publishing 
highly focused books on specific technologies and solutions, 





Our books and publications share the experiences of your fellow IT professionals in adapting 
and customizing today’s systems, applications, and frameworks. Our solution-based books 
give you the knowledge and power to customize the software and technologies you're using 
to get the job done, Packt books are more specific and less general than the IT books you have 
seen in the past. Our unique business model allows us to bring you more focused information, 
giving you more of what you need to know, and less of what you don't. 


Packt is a modern yet unique publishing company that focuses on producing quality, 
cutting-edge books for communities of developers, administrators, and newbies alike. 
For more information, please visit our website at wi. packtpub. com. 


About Packt Open Source 


1n 2010, Packt launched two new brands, Packt Open Source and Packt Enterprise, in order 
to continue its focus on specialization. This book is part of the Packt Open Source brand, 
home to books published on software built around open source licenses, and offering 
information to anybody from advanced developers to budding web designers. The Open 
Source brand also runs Packt's Open Source Royalty Scheme, by which Packt gives a royalty 
to each open source project about whose software a book is sold. 


Writing for Packt 


We welcome all inquiries from people who are interested in authoring. Book proposals should 
be sent to authorspacktpub. con. If your book idea is still at an early stage and you would 
like to discuss it first before writing a formal book proposal, then please contact us; one of our 
commissioning editors will get in touch with you. 





We're not just looking for published authors; if you have strong technical skills but no writing 
experience, our experienced editors can help you develop a writing career, or simply get some 
additional reward for your expertise. 
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Magento 2 
Developer's Guide 


Magento 2 Developer's Guide 
ISBN: 978-1-78588-658-4 Paperback: 412 pages 


Harness the power of Magento 2, the most recent 
version of the world's favorite e-commerce platform, 
for your online store 


L. Set up, configure, and power up your Magento 
environment from development to production, 


Master the use of Web APL to communicate 
with the Magento system and create custom. 


3. Create custom modules from scratch to extend 
the core functionality of the Magento system, 





Magento 2 Development 
Cookbook 





Magento 2 Development 
Cookbook 
ISBN: 97841-78588-219.7 Paperback: 304 pages 


Over 60 recipes that will tailor and customize your 
experience with Magento 2 


1. Solve common problems encountered while 
extending your Magento 2 store to fit your 
business needs 





Delve into the exciting and enhanced features 
of Magento 2 such as customizing security 
permissions, intelligent filtered search options, 
сагу third-party integration, among others, 


3. Learn to build and maintain a Magento 2 shop. 
via a visual-based page editor and customize. 
the look and feel using Magento 2s offerings on 
the go. 


Please check www.PacktPub.com for information on our titles 
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Mastering Magento 
Theme Design 


Mastering Magento Theme Design 
ISBN: 9781-78528-236 Paperback: 310 pages 


Create responsive Magento themes using Bootstrap, 
the most widely used frontend framework 


L Create an advanced responsive Magento theme 
based on the framework Bootstrap 3. 


2. Create a powerful admin theme options panel 


3. Loaded with practical live coding example to 
create the theme from scratch, 
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Learning Magento 
Theme Development 

ISBN: 978-1-78528-061-2 Paperback: 182 pages 
Create visually stunning and responsive themes to 
сайте the appearares of Your Magento sore 


1. Create a custom theme from scratch for your 
Magento store. 


2 Change the basics of your Magento theme from. 
the logo of your store to the color scheme of 
your theme. 

3. Easy-to-follow step-by-step guide on how to 


get up and running with Magento themes, 


Please check www.PacktPub.com for information on our titles 


